使用Navigator的坑



  • 显示不能使用navigator。后来知道版本问题引入
    import { Navigator } from 'react-native-deprecated-custom-components';后又报这个错
    undefined is not an object(evaluating '_react3.default.PropTypes.shape') ,哪位大神知道怎么处理啊?

    /**

    import React, { Component } from 'react';
    import { Navigator } from 'react-native-deprecated-custom-components';
    import {
    Platform,
    StyleSheet,
    Text,
    View,
    ScrollView
    } from 'react-native';
    const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
    });
    //外部组件导入
    const Header = require('./Header');

    export default class App extends Component{
    render (){
    let defaultName='navigatorTest';
    let defaultComponent=NavigatorTest;
    return (
    <Navigator
    initialRoute={{ name:defaultName,component:defaultComponent }}
    //配置场景
    configureScene=
    {
    (route) =>{
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
    }
    }
    renderScene={
    (route,navigator)=>{
    let Component = route.component;
    return <Component {...route.passProps} navigator={navigator} />
    }
    }
    />
    );
    }
    }

    class NavigatorTest extends Component{

    constructor(props){
        super(props);
        this.state ={};
    }
    

    _pressButton(){
    const {navigator} = this.props;//这句等于 const navigator = this.props.navigator;
    if(navigator){
    this.props.navigator.push({
    name:'Detail',
    component:Detail,
    })
    }
    }
    render(){
    return(
    <ScrollView style={styles.flex}>
    <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>
    这是NavigatorTest组件
    </Text>
    </ScrollView>
    );
    }
    }

    class Detail extends Component{
    constructor(props){
    super(props);
    this.state ={};
    }
    _pressButton(){
    const {navigator} = this.props;//这句等于 const navigator = this.props.navigator;
    if(navigator){
    navigator.pop();
    }
    }
    render(){
    return(
    <ScrollView style={styles.flex}>
    <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>这是详情页</Text>
    </ScrollView>
    );
    }
    }

    const styles = StyleSheet.create({
    flex:{
    flex:1
    },
    list_item:{
    borderBottomWidth:1,
    justifyContent: 'center',
    height:40,
    marginLeft:10,
    marginRight:10,
    color:'#7b7b7b',
    },
    font_item:{
    fontSize:25
    }
    });



  • 0_1508305816527_image.png
    同样是这个问题,更新 0.49 之后报的错误,看错误是出在 react-native-deprecated-custom-components中,看样子只能等 fb 更新这个包了



  • 暂时找到了一个解决办法,更新之后 React 的版本升到了 "^16.0.0-beta.5",还原到 "^16.0.0-alpha.12" 就可以了



  • @ayuhani 这个办法能行得通,只是恰巧 RN v0.49+ 能用之前版本的 react,正确的做法是用 RN v0.49 以下的版本。

    但我还是要劝退 react-native-deprecated-custom-components。



  • @7c00 因为之前用到了 Navigator,确实该放弃了- -


登录后回复