使用的react-native版本已经不支持Navigator组件,请问如何实现一个简单的跳转页面。



  • 我使用的RN版本是0.61.5,react版本为16.9.0。
    当我发现不能从react-native引用Navigator组件时,我尝试使用react-navigation,但是里面的组件名也被更新了...相关文档几乎没有...求指点
    以下是我的代码:

    登录界面###########################################

    import React,{Component} from 'react';
    import {
      StyleSheet,
      View,
      Text,
      TextInput,
      Image,
      TouchableHighlight,
      Navigator,
    } from 'react-native';
    
    import MainPage from './MainPage'
    
    class App extends React.Component {
    
      constructor(props) {
        super(props); //继承父组件props
      }
    
      render() {
        return (
            <>
              <View style={styles.container}>
                <Image source={require('./img/library_mu.png')} style={styles.incogStyle}/>
                <View style={styles.item}>
                  <Text style={styles.textStyle}>用户帐号:</Text>
                  <TextInput
                      ref="inputLoginName"
                      autoFocus={true}
                      underlineColorAndroid="gray"
                      placeholder="请输入用户名"
                      clearTextOnFocus={true}
                      clearButtonMode="while-editing"
                      style={{flex: 1}}
                      onChangeText={input => this.setState({username: input})}
                  />
                </View>
                <View style={styles.item}>
                  <Text style={styles.textStyle}>用户密码:</Text>
                  <TextInput
                      ref="inputLoginPwd"
                      underlineColorAndroid="gray"
                      password={true}
                      //占位符
                      placeholder="请输入密码"
                      clearTextOnFocus={true}
                      //当编辑的时候右侧出现x按钮
                      clearButtonMode="while-editing"
                      style={{flex: 1}}
                      onChangeText={input => this.setState({userpwd: input})}
                  />
                </View>
                <TouchableHighlight
                    style={styles.login}
                    underlayColor="transparent"
                    onPress={()=>this.loginInMainPage}>
                  <Text style={styles.loginText}>登录</Text>
                </TouchableHighlight>
              </View>
            </>
        );
      }
    
      /**
       * 登录进入主页面
       */
      loginInMainPage() {
        this.refs.inputLoginName.blur();
        this.refs.inputLoginPwd.blur();
        //跳转到新场景
        this.props.navigator.resetTo({
          component: MainPage,
          params: {
            logName: this.state.username,
            logPwd: this.state.userpwd,
            parentComponent: this,
            ...this.props
          },
        });
      }
    
      setLoginName(input) {
        this.setState = {inputName: input}
      }
    
      setLoginPwd(input) {
        this.setState = {inputPwd: input}
      }
    

    登录后的界面#########################################

    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Navigator,
    } from 'react-native';
    export default class MainPage extends Component {
        constructor(props) {
            super(props);
        }
    
        render() {
            return (<View style={styles.container}>
                <Text style={styles.textStyle}>欢迎来到主界面</Text>
                <Text style={styles.textStyle}>您当前的用户名是:{this.props.logName}</Text>
                <Text style={styles.textStyle}>您当前的密码是:{this.props.logPwd}</Text>
            </View>)
        }
    }
    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        textStyle: {
            fontSize: 18,
            color: 'black',
            marginRight: 10,
        },
    });
    
    




  • 我试着写了一个页面跳转,但仍旧报错。。。。

    ##配置了路由
    32861003-7ca8-471c-bbcd-22e430563111-image.png

    ##跳转代码
    27810a1f-f9b2-4586-98ac-954333e342a4-image.png

    ##错误信息:
    057d6837-a911-412a-a3de-e2bd1e642ca5-image.png



    1. 你的写法仍然是旧版本,请按最新版本的文档来
    2. 看报错位于一个列表中,大概率是在子组件中写了跳转,而子组件并不具有navigation这个props,必须手动从父组件传递过来,或者通过hooks,全局ref,hoc等手段获取(如果你看不懂我这句话,那么你得补react相关的基础知识)


  • 是的,我用的版本是3.x的,我看了很多教程都不是最新版(官方有,但怪我英语太烂),所以我降低了我的版本。
    公司年后突然整了个app项目要求用RN来做(我们一直是搞C#的...),现在是现学现卖很无语。
    我看了官网3.x的教程,他是把createStackNavigator的定义和页面跳转的代码写在一起了,我的则是分开写的,createStackNavigator和跳转触发的代码分别写在了不同的js文件



  • 你现在的问题并不在导航代码中,而是props在父子组件中的传递



  • 我是通过这行代码来获取navigation参数的,但我debug的时发现这里并没有取到值,请问怎么才能获取到自定义AppStackNavigator的值呢?
    de43d3ec-2452-4a29-bb82-3b97d3f3da49-image.png

    AppStackNavigator:
    4296436b-b5ae-47ef-b6f3-30aa933469e1-image.png



  • 只有作为screen使用的那个组件才能直接拿到navigation,除此之外的组件获取的方法我上面已经提过了



  • @晴明 已经处理好了。非常感谢!


Log in to reply