React-Native在页面之间导航

时间:2017-11-02 21:16:31

标签: react-native navigation

我正在使用React-Native制作一个简单的2个静态页面应用程序。

将会有一个带有按钮的登陆页面(TouchableHighlight)About us,当用户点击它时,它应该呈现一个全新的组件。

在html中,可以使用以下内容完成:<a href="aboutus.html">

我曾尝试使用react-native-router-flux,但我一直收到一些错误,我不想有标题。

1 个答案:

答案 0 :(得分:0)

我是这样做的

在index.android.js(index.js)中,导入并定义要导航的屏幕

    import {StackNavigator} from 'react-navigation'
    import App from './App';
    import App1 from './App1';
    import App2 from './App2';

    const Navigation = StackNavigator({
        App:{screen: App},
        App1:{screen: App1},
        App2:{screen: App2}
    });

您想在此处导航的屏幕是App.js

export default class App extends React.Component<{}> {
        static navigationOptions={
            title:'First Screen',
        }
      render() {
        var {navigate} = this.props.navigation;
        return (
          <View>
            <Text>This is first screen</Text>
            <Button
                onPress={() => navigate('App1')}
                title="Go to screen 2"
            />
          </View>
        );
      }
    }    

如果要导航到另一个(App2.js),App1.js将与App.js相同