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

Question

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

App.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>
   );
 }
}

newPage.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>
      );
    }
 }

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

编辑:我正在使用 React Navigation

Answer 1

您需要先设置可以选择的替代方案。

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

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

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

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