javascript - 在 React-native 中使用 NavigatiorIOS 导航到另一个场景

Question

我只是 React-Native 的初学者，我不太确定如何正确使用 NavigatorIOS。事情是这样的，我有一个名为 index.ios.js 的文件，其中包含另一个名为 walkthroughPage.js 的文件。 walkthroughPage 只是一个漫游屏幕。

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);

在这个屏幕上，我可以看到一个 NavigationBar，所以我猜它有点工作，这里就是问题所在。

在 walkthroughPage.js 中，我有一个按钮处理程序，它告诉要触发的事件。

'use strict';

var React = require('react-native')
var Button = require('react-native-button')
var Swiper = require('react-native-swiper')
var authenticationPage = require('./components/pages/authenticationPage')

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

var walkthroughPage = React.createClass({

  _getStartedButtonPress: function() {
    this.props.navigator.push(authenticationPage);
  },

  render: function() {
    return (
      <Swiper style={styles.wrapper} showsButtons={false}>
        <View style={styles.slide1}>
          <Image
            style={styles.icon}
            source={require('image!F_icon.svg')}
          />
          <Text style={styles.text}>Anslut med Facebook</Text>
          <Text style={styles.paragraph}>Använd Facebook för att snabbt kunnna komma igång med Black Cab</Text>
        </View>
        <View style={styles.slide2}>
          <Image
            style={styles.icon}
            source={require('image!map')}
          />
          <Text style={styles.text}>Hitta chaufförer i närheten</Text>
          <Text style={styles.paragraph}>Aktivera platstjänster på din telefon så vi kan använda din GPS, då slipper du bokstavera på fyllan</Text>
        </View>
        <View style={styles.slide3}>
          <Image
            style={styles.money}
            source={require('image!coin')}
          />
          <Text style={styles.text}>Spara pengar</Text>
          <Text style={styles.paragraph}>Alla vet att svarttaxi är billigt, du är medveten om det va?</Text>
          <Button style={styles.skip} onPress={this._getStartedButtonPress}>
            Kom igång
          </Button>
        </View>
      </Swiper>
    );
  }
});

var styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  text: {
    color: '#2A2B30',
    fontSize: 20,
    fontWeight: '500',
  },
  paragraph: {
    color: '#b7b7b7',
    marginTop: 25,
    fontSize: 18,
    textAlign: 'center',
    width: 340,
    lineHeight: 25,
  },
  skip: {
    color: '#567BEC',
    marginTop: 100,
  },
  icon: {
    marginTop: -150,
    marginBottom: 30,
    height: 100,
    width: 100,
  },
  money: {
    marginTop: -100,
    marginBottom: 30,
    height: 100,
    width: 100,
  },
})

module.exports = walkthroughPage;

authenticationPage.js

 '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;

如何告诉 _getStartedButtonPress 推送到正确的 View ，如何将 View 包含在 _getStartedButtonPress 函数中？

我得到这个错误Requiring unknown module "./components/pages/authenticationPage".

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

Answer 1

未知模块问题:文件路径为相对路径。因此，如果 walkthroughPage.js 在组件/页面中，则包含身份验证页面的相对路径需要是 require('./authenticationPage')。

Richard Kho 关于如何使用导航器的回答是正确的。你不能只传递一个组件——你需要传递一个代表路由的对象(其中“组件”是一个属性)。