如何為兩個屏幕創建StackNavigator？

Question

我正在使用react-navigation構建我的第一個react-native應用程序。 我有一個主屏幕，我要在上面有一個注冊按鈕。

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

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組件。

當我加載模擬器時，導航轉到主屏幕，但立即動畫化為“注冊”屏幕。

我對此很陌生，但是我想要做的是出現主屏幕，並且當我單擊“注冊”按鈕時能夠導航到注冊屏幕（這就是為什么我要注冊屏幕）。

關於如何實現這一目標的任何想法？

Answer 1

您正在執行功能，而不是作為屬性傳遞。 括號執行函數。

這個，

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

應該像下面

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

Answer 2

您的問題不是您需要更多的導航器。 您已將this.props.navigation.navigate('SignUp')的結果定義為onPress，但是您需要的是函數句柄。

將以下內容放在此處，它將按您的預期工作；

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