在 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 推送到正确的视图，如何将视图包含在 _getStartedButtonPress 函数中？

我收到这个错误Requiring unknown module ”./components/pages/authenticationPage”.

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

Answer 1

首先要做的事情：确保 authenticationPage 的路径是准确的。看来你的路径不正确。

其次，这是推送下一条路线的方式：

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

title 是您想要在导航栏上显示的名称
component 是您传递的实际组件
passProps是你经过的地方，好吧，该组件的任何道具

Answer 2

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

Richard Kho 关于如何使用导航器的回答是正确的。你不能只传递一个组件 - 你需要传递一个代表路线的对象（其中 "component" 是一个属性）。

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

Navigate to another scene using NavigatiorIOS in React-native

javascript

reactjs

react-native