React-Native中的NavigatorIOS错误？

问题描述：

我正在尝试使用NavigatorIOS从我的React-Native应用程序中的索引ios页导航到另一页。然而，当我这样做时，我得到这个错误，并且下一页无法加载：Warning: Failed propType: Invalid prop 'initialRoute.component' of type 'object' supplied to 'NavigatorIOS', expected 'function'.React-Native中的NavigatorIOS错误？

我很确定我已经以完全相同的方式在过去成功实现了这一点，但我可能会错过一些东西 - 任何反馈非常感谢！

相关的代码在index.ios.js：

onLoginPressed() { 
    return (
     <React.NavigatorIOS 
     style={styles.container} 
     initialRoute={{ 
     title: 'Home', 
     component: Home, 
     }}/> 
    ); 
} 

render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.welcome}> 
     Welcome! 
     </Text> 
    <TouchableHighlight 
     onPress={() => {this.onLoginPressed()}} 
     activeOpacity={75/100} 
     underlayColor={"rgb(210,210,210)"}> 
     <Text>Login</Text> 
    </TouchableHighlight> 
    </View> 
);

}} 在首页

相关代码：

class Home extends Component { 

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

    render() { 
     console.log('loaded here'); //this is never being called 
     return (
     <View> 
      <Text 
      style={{ 
       color: 'black', 
       fontSize: 16, 
       fontWeight: 'normal', 
       fontFamily: 'Helvetica Neue', 
      }}> 
      My Text 
      </Text> 
     </View> 
    ) 
    } 
    } 

export default Home

答

你需要有你NavigatorIOS，并在您最初的路线应用程序的根源：

class App extends Component { 
    render() { 
     return (
      <NavigatorIOS 
      style={styles.container} 
      initialRoute={{ 
       title: 'Home', 
       component: Home, 
      }}/> 
     ) 
    } 
}

onLoginPressed应该推新航线的航线堆栈：

onLoginPressed() { 
    this.props.navigator.push({ 
     component: Login, 
    title: 'Login' 
    }) 
}

我已经成立了一个工作示例与您的代码here。

https://rnplay.org/apps/Cl8aPQ

React-Native中的NavigatorIOS错误？

相关推荐