Question

我正在使用react-navigation来构建我的第一个本机应用程序。我有一个主屏幕，我想要一个注册按钮。

在我的路由器文件中，我有以下内容：

export const RootNavigator = StackNavigator({

Home: {
  screen: Home
}, 
SignUp: {
  screen: SignUp
}

}, {
mode: 'modal',
headerMode: 'none',

}
);

这是我的Home.js文件：

export default class Home extends Component {
render() {
    const buttons = ['SIGN IN', 'SIGN UP']
    const { selectedIndex } = this.state

    return (
        <View style={styles.logoContainer} >
            <Button
              raised    
              backgroundColor="#333"
              title='SIGN IN' />

            <Button
              raised
              onPress = {this.props.navigation.navigate('SignUp')}
              backgroundColor="#333"
              title='SIGN UP' />

        </View>
    );
}

}

在我的索引文件中，我渲染了这个RootNavigator组件。

当我加载模拟器时，导航进入主屏幕，但立即动画到SignUp屏幕。

我对此很陌生，但我想要做的是显示主屏幕，并且当我点击注册按钮时能够导航到注册屏幕（这就是为什么我有StackNavigator中的注册屏幕）。

有关如何实现这一目标的任何想法？

Answer 1

您正在执行函数而不是作为属性传递。括号内执行函数。

此，

onPress={this.props.navigation.navigate('SignUp')}

应该如下

onPress={() => this.props.navigation.navigate('SignUp')}

Answer 2

您的问题不是需要更多导航仪。您已将onPress定义为this.props.navigation.navigate('SignUp')的结果，但您需要的是函数句柄。

将以下内容放在那里，它将按照您的意图运作;

() => this.props.navigation.navigate('SignUp')

如何为两个屏幕创建StackNavigator？

2 个答案: