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项目并重建了＆amp;跑。没有运气，怎么回事？

Answer 1

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

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

在React-native

1 个答案: