javascript - React-Native 中的 NavigatorIOS 错误？

Question

我目前正在尝试使用 NavigatorIOS 从我的 React-Native 应用程序中的索引 ios 页面导航到另一个页面。但是，当我这样做时，我收到此错误并且无法加载下一页:警告:propType 失败:提供给“NavigatorIOS”的“object”类型的无效 prop“initialRoute.component”，预期为“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

Answer 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