Пользовательская навигация React OnClick

Я пытаюсь сделать кнопку в середине экрана, которая будет перемещаться по пользователю при нажатии, и я использую библиотеку реагирования-навигации. Как мне это сделать без stackNavigator, HeaderNavigator или DrawerNavigator?

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Button } from 'react-native-elements';

    export default class LoginButton extends Component {
      onPressButton() {
        console.log('pressed');
      }
      render() {
        return (
              <Button
              title='LOG IN'
              buttonStyle={styles.loginButton}
              onPress= ## how do i do it?
              />
        );
      }
    }

    const styles = {

      loginButton: {
        width: 290,
        height: 50,
        backgroundColor: '#A91515',
        alignItems: 'center',
        borderRadius: 4,
        marginTop: 35,
        marginLeft: 49,
        justifyContent: 'space-around'
      }
    };

react-native reactjs javascript navigation react-navigation
person william anputra    schedule 13.04.2017    source источник
comment
Вы также можете создавать собственные навигаторы. Кроме того, не будет ли бесполезно использовать реактивную навигацию и не использовать навигаторы? Есть ли конкретная причина, по которой вы не хотите использовать навигаторы, упомянутые в вопросе?   -  person aajiwani    schedule 27.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал StackNavigator, но не другие, поэтому этот ответ предназначен только для StackNavigator. Во-первых, вам нужен маршрутизатор.

export const AppNavigator = StackNavigator({
   Home: { screen: Home },
   NextPage: { screen: NextPage}
})

Далее вам нужны представления для Home и Next Page. Убедитесь, что имя класса совпадает со значением screen в вашем маршрутизаторе. Затем в index.ios/android.js, в AppRegistry вставьте AppRegistry.registerComponent('Appname', () => AppNavigator). AppNavigator — это имя вашего StackNavigator.

Затем вернитесь к коду выше. Под render() поставьте const { navigate } = this.props.navigation.

Наконец, внутри свойства onPress добавьте navigate('NextPage'). NextPage — это имя вашего следующего экрана.

Все это есть в документации по реакции-навигации. Найдите время, чтобы прочитать его, чтобы понять, как работает мой ответ выше.

https://reactnavigation.org/docs/intro/

Надеюсь это поможет!

Окончательный код:

import { StackNavigator } from 'react-navigation'
import React, { Component } from 'react'
import { AppRegistry, View, Text, Button } from 'react-native'

const AppNavigator = StackNavigator({
   Home: { screen: Home },
   NextPage: { screen: NextPage }
})

export default class Home extends Component{
   render(){
      const { navigate } = this.props.navigation
      return(
         <View>
            <Text>Homepage</Text>
            <Button title='NextPage' onPress={navigate('NextPage')}></Button>
         </View>
      )
   }
}

export default class NextPage extends Component{
   render(){
      return(
         <View>
            <Text>NextPage</Text>
         </View>
      )
   }
}

AppRegistry.registerComponent('AppName', () => AppNavigator)

Это может быть неточным, потому что я действительно не выполнил это.

person Maiko Francisco Rugeria    schedule 25.07.2017