Question

我正处于学习阶段。在学习过程中，我创建了一个包含多个组件的单页应用。现在我想整合react-navigation以使其成为多页，但无法确定如何完成此操作。

我的代码结构是，

我有一个主文件App.js，我将所有组件导入其中。我的AppRegistry代码在此文件中。

我有两个主要组件Header和AlbumList，我将这两个组件导入App.js（因为它是一个单一的屏幕应用程序）

现在我想创建一个新屏幕，在我的应用中显示类似于页面的内容。为此，我创建了一个单独的组件，但不确定如何将其与react-navigation一起使用。

我打算在我的单个屏幕应用程序链接的末尾添加一个小按钮到关于页面。

在App.js中我添加了

const MainApp = StackNavigator({
   Home: { screen: About},
});

并在Albumlist组件中，我想放置一个按钮链接到我添加的另一个屏幕

    render(){
    const { navigate } = this.props.navigation;
    return(
            <Button title="Go to Jane's profile" 
                    onPress={() =>  navigate('About') }
            />
          );
              }

在上面代码中添加的关于组件中，呈现消息

       static navigationOptions = {
          title: 'About',
       };

Lemme know如果我错过了什么

Answer 1

您可以根据您的用户界面使用堆栈导航或标签导航

以下是添加屏幕的方法

const Mainstack = StackNavigator({
  SplashScreen: { screen: SplashScreen},
  Login: { screen: LoginScreen},
  Verify: { screen: VerificationScreen},
  Register: { screen: RegisterScreen },
  Home: { screen: HomeScreen},
},
{
    navigationOptions,
    initialRouteName: 'SplashScreen',
});

export default Mainstack;

在您的主app.js文件中调用此内容，例如<Mainstack />并且您已完成导航

如何在我的一个页面中集成“react-navigation”对原生应用程序做出反应？

1 个答案: