Javascript 在React native中使用NavigationIOS导航到另一个场景

我只是一个初学者，对于如何正确使用NavigatorIOS，我有点不确定。 问题是，我有一个名为

index.ios.js

的文件，其中包括另一个名为

walkthroughPage.js

的文件<代码>演练页面只是一个演练屏幕

index.ios.js

'use strict';

var React = require('react-native')
var walkthroughPage = require('./components/pages/walkthroughPage')

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  NavigatorIOS,
} = React;

var blackcab = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.wrapper}
        initialRoute={{
          component: walkthroughPage,
          title: 'Välkommen',
        }}
      />
    );
  }
});

var styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
})

AppRegistry.registerComponent('blackcab', () => blackcab);

 'use strict';

var React = require('react-native')

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var authenticationPage = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = authenticationPage;

authenticationPage.js

'use strict';

var React = require('react-native')
var walkthroughPage = require('./components/pages/walkthroughPage')

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  NavigatorIOS,
} = React;

var blackcab = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
        style={styles.wrapper}
        initialRoute={{
          component: walkthroughPage,
          title: 'Välkommen',
        }}
      />
    );
  }
});

var styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
})

AppRegistry.registerComponent('blackcab', () => blackcab);

 'use strict';

var React = require('react-native')

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var authenticationPage = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = authenticationPage;

“严格使用”；
var React=require（'React-native'）
变量{
评估学，
样式表，
文本，
看法
}=反应；
var authenticationPage=React.createClass({
render:function（）{
返回(
欢迎来到这里！
要开始，请编辑index.ios.js
按Cmd+R重新加载，{'\n'}
用于开发菜单的Cmd+D或shake
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
module.exports=authenticationPage；

如何告诉

\u getStartedButtonPress

将视图推送到正确的视图，如何将视图包含在

\u getStartedButtonPress

功能中

我收到此错误

需要未知模块“/components/pages/authenticationPage”

---

我已经重新启动了打包程序，清理了Xcode项目，并重建并运行了它。运气不好，怎么会这样？

第一件事：确保

身份验证页面的路径准确无误。看起来你的路径不正确

第二，以下是您如何推动下一条路线：

this.props.navigator.push({
  title: 'Web',
  component: Web,
  passProps: {url: this.state.productLink}
})


title
是您希望在导航栏上显示的名称
组件
是
您正在传递的实际组件
passProps
是您通过的地方，
好吧，那部分有什么道具吗
第一件事：确保
身份验证页面的路径准确无误。看起来你的路径不正确

第二，以下是您如何推动下一条路线：

this.props.navigator.push({
  title: 'Web',
  component: Web,
  passProps: {url: this.state.productLink}
})


title
是您希望在导航栏上显示的名称
组件
是
您正在传递的实际组件
passProps
是您通过的地方，
好吧，那部分有什么道具吗
对于未知模块问题：文件的路径是相对的。因此，如果walkthroughPage.js位于组件/页面中，则包含身份验证页面的相对路径需要是
require（'./authenticationPage'）

Richard Kho关于如何使用导航器的回答是正确的。您不能只传递一个组件-您需要传递一个表示路由的对象（其中“组件”是一个属性）
 对于未知模块问题：文件的路径是相对的。因此，如果walkthroughPage.js位于组件/页面中，则包含身份验证页面的相对路径需要是
require（'./authenticationPage'）

Richard Kho关于如何使用导航器的回答是正确的。您不能只传递一个组件-您需要传递一个表示路由的对象（其中“组件”是一个属性）
 my
authenticationPage
的路径正确，它正确地指向了组件，但我仍然得到了需要未知模块的
。
。请确认--这是在按下
walkthroughPage
上的按钮或尝试安装
walkthroughPage
时发生的错误吗？只要我启动应用程序。如果在
演练页面
中删除对
身份验证页面
的所有引用，问题是否仍然存在？除此之外，我现在要做的事情是：确保你的路径和文件拼写正确；在Xcode中清理并重建应用程序（command+option+shift+k）；将
.js
附加到该路径的末尾（如果它是直接文件而不是文件夹），在删除应用程序加载的引用时，在末尾添加了
.js
，并再次检查了路径，现在我已经清理了Xcode项目并重建了它。还是相同的错误：/my
authenticationPage
的路径正确，它正确地指向了组件，但我仍然得到了需要未知模块的
。
。请确认--这是在按下
walkthroughPage
上的按钮或尝试安装
walkthroughPage
时发生的错误吗？只要我启动应用程序。如果在
演练页面
中删除对
身份验证页面
的所有引用，问题是否仍然存在？除此之外，我现在要做的事情是：确保你的路径和文件拼写正确；在Xcode中清理并重建应用程序（command+option+shift+k）；将
.js
附加到该路径的末尾（如果它是直接文件而不是文件夹），在删除应用程序加载的引用时，在末尾添加了
.js
，并再次检查了路径，现在我已经清理了Xcode项目并重建了它。还是同样的错误：/你在那里写的代码字符串如果有效，那么实际上得到了，所以不太确定我将如何给出分数..你可以把它们给Richard Kho你在那里写的代码字符串如果有效，那么不太确定我将如何给出分数..你可以给Richard Kho