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。

Answer 2

App.js

从'react'导入React；从'react-native'导入{StyleSheet}; 从“反应导航”导入{createAppContainer}；进口从“反应性本机安全区域视图”查看SafeAreaView；导入{ createStackNavigator} from'reactive-navigation-stack';导入ThankPage 来自“ ./ThankPage”；

const RootStack = createStackNavigator（{Home：{ 主页：主屏幕，谢谢：ThankPage}，}）;
 const AppContainer = createAppContainer(RootStack);
 const [username, setUsername] = React.useState('');
 const [password, setPassword] = React.useState('');

  class HomeScreen extends React.Component {   navigateToNew = () => {
this.props.navigation.navigate('ThankPage'); }  render() {
 const onbtnPress = () =>{
alert("Thank you")  }
return (
<SafeAreaView>
<View style={styles.container}>

  <Image
  source = {require('./login_img.png')}
  style = {{ width: 350, height: 150 }} />

      <ImageBackground style={styles.imgback}
        source = {require('./login_back.png')}
        style = {{ width: 340, height: 250 }}>

          <View style={styles.SectionStyle}>
          <TextInput
            style={{ height: 20,borderColor: 'gray' }}
            value={username}
            onChangeText={username =>setUsername(username)}
            placeholder={"Username"}
            underlineColorAndroid="transparent"
            />
            </View>
            <View style={styles.SectionStyle}>
          <TextInput
            style={{ height: 20,borderColor: 'gray' }}
            onChangeText={password => setPassword(password)}
            value={password}
            placeholder={"Password"}
            underlineColorAndroid="transparent"
            secureTextEntry={true}
            inlineImageLeft="./eye_close_icon.imageset/eye_close_icon.png"
            />
            <Image source={require('./eye_close_icon.imageset/eye_close_icon.png')}
style = {styles.ImageStyle} />
   <TouchableOpacity 

   onPress={ this.navigateToNew }
   >
      <Image source={require('./btn_back.png')} style={styles.imgbtnok} />
      <Text style={styles.white }>Submit & SYNC</Text>
    </TouchableOpacity>

</View>
</SafeAreaView>   ); }   }
const styles = StyleSheet.create（{容器：{ 弹性：1， backgroundColor：“灰色”， alignItems：'中心'， justifyContent：“中心”， margin：10，}，SectionStyle：{ flexDirection：'行'， justifyContent：“中心”， alignItems：'中心'， backgroundColor：“＃fff”， borderWidth：.5， borderColor：'＃000'，高度：40， borderRadius：5，边距：25}，imgback：{ opacity：1，}，ImageStyle：{ 高度：25，宽度：25， resizeMode：'stretch'，}，白色：{ //在此处定义您的十六进制颜色代码。颜色：“＃FFFFFF”， marginLeft：135， marginTop：-55，}，imgbtnok：{ 高度：80，宽度：130， marginLeft：120，位置：“相对”， resizeMode：'stretch'，}，}）;

导出默认类App扩展了React.Component {

render（）{
回报; }

我尝试了很多，但遇到错误。myError

转到React Navigation（React Native）中另一个文件的页面

2 个答案: