时间戳

首页 > 解决方案 > 在 React Navigation (React Native) 中转到另一个文件的页面

javascript - 在 React Navigation (React Native) 中转到另一个文件的页面

问题描述

我有两个文件。App.js 和 newPage.js。我正在尝试从 App.js 访问 newPage.js 上的页面。我对 React native 完全陌生，所以我在让它工作时遇到了一些麻烦。

应用程序.js

import React from 'react';
import { StyleSheet, Text, FlatList, View, Button, TextInput, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import NewPage from './src/newPage';

export default class App extends React.Component {
   navigateToNew = () => {
       this.props.navigation.navigate('NewPage');
   }
   render() {
     const { navigate } = this.props.navigation;
     return (
      <View>
         <Text>Home Screen</Text>
         <Button
            title="New Page"
            onPress={ this.navigateToNew }
         />
      </View>
   );
 }
}

新页面.js

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation'; 

export default class NewPage extends React.Component {
   render() {
      return (
        <View>
            <Text>New Screen</Text>
        </View>
      );
    }
 }

我不确定为什么这不起作用。任何帮助都是极好的！

编辑：我正在使用反应导航

标签： javascriptreactjsreact-native

解决方案

您需要设置可以首先使用的替代方案。

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    newscreen: newPage
  },
});

并在 App 类中返回 RootStack。提供导航的代码是

this.props.navigation.navigate('ComponentName')

如果您使用 onClick 运行此代码，则会发生导航过程。但不要忘记，必须创建 RootStack。

推荐阅读