反应导航自定义OnClick

Question

我正在尝试在屏幕中间创建一个按钮，该按钮在单击时将导航用户，并且我正在使用react-navigation库。 没有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'
      }
    };

Answer 1

我已经使用了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是您下一个屏幕的名称。

所有这些都在react-navigation的文档中。 花一些时间阅读它，以了解我上面的答案是如何工作的。

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)

这可能不准确，因为我尚未真正执行此操作。