Question

我目前正在尝试使用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>
);

} }

Home中的相关代码：

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

React-Native中的NavigatorIOS错误？

1 个答案: