React-Native 中的 NavigatorIOS 错误？答案

【问题标题】：NavigatorIOS error in React-Native?React-Native 中的 NavigatorIOS 错误？
【发布时间】：2016-06-10 01:08:24
【问题描述】：

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

我很确定我过去以完全相同的方式成功地实现了这一点，但我可能遗漏了一些东西——非常感谢任何反馈！

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

【问题讨论】：

标签： javascript ios reactjs react-native navigator

【解决方案1】：

你需要在应用程序的根目录下有你的 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

【讨论】：