Question

我已使用此代码及其 正常工作 。

但我希望通过将页面保存在不同的.js文件中来执行相同的过程并使用导航器进行导航。

请添加示例代码我是新手 React Native ...

    var React = require('react-native');

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

    var SCREEN_WIDTH = require('Dimensions').get('window').width;
    var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

    var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {

//取消pop

后，让它快速恢复

      snapVelocity: 8,

       // Make it so we can drag anywhere on the screen

      edgeHitWidth: SCREEN_WIDTH,
    });

    var CustomSceneConfig = Object.assign({}, BaseConfig, {

       // A very tighly wound spring will make this transition fast

      springTension: 100,
      springFriction: 1,

      // Use our custom gesture defined above

      gestures: {
        pop: CustomLeftToRightGesture,
      }
    });

    var PageOne = React.createClass({
      _handlePress() {
        this.props.navigator.push({id: 2,});
      },

      render() {
        return (
          <View style={[styles.container, {backgroundColor: 'green'}]}>
            <Text style={styles.welcome}>Greetings!</Text>
            <TouchableOpacity onPress={this._handlePress}>
              <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
                <Text style={styles.welcome}>Go to page two</Text>
              </View>
            </TouchableOpacity>
           </View>
        )
      },
    });

    var PageTwo = React.createClass({
      _handlePress() {
        this.props.navigator.pop();
      },

      render() {
        return (
          <View style={[styles.container, {backgroundColor: 'purple'}]}>
            <Text style={styles.welcome}>This is page two!</Text>
            <TouchableOpacity onPress={this._handlePress}>
              <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
                <Text style={styles.welcome}>Go back</Text>
              </View>
            </TouchableOpacity>
           </View>
        )
      },
    });

    var SampleApp = React.createClass({
      _renderScene(route, navigator) {
        if (route.id === 1) {
          return <PageOne navigator={navigator} />
        } else if (route.id === 2) {
          return <PageTwo navigator={navigator} />
        }
      },

      _configureScene(route) {
        return CustomSceneConfig;
      },

      render() {
        return (
          <Navigator
            initialRoute={{id: 1, }}
            renderScene={this._renderScene}
            configureScene={this._configureScene} />
        );
      }
    });

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

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

    module.exports = SampleApp;

Answer 1

要在页面之间导航，您将需要3个组件（反应类）。一个用于导航器（此处为SampleApp），一个用于pageOne，另一个用于pageTwo。建议每个js文件有一个组件。因此，您需要创建一个名为PageOne.js，PageTwo.js和SampleApp.js的文件。当你想要渲染存储在另一个文件中的组件时，你需要像这样导入它import PageOne from './path/PageOne';从另一个文件访问变量的唯一方法是导入它，但是如果不这样做就不行首先导出变量。导出变量基本上是说这个代码块可以在另一个文件中使用。您可以从文件中导出多个变量。这里有一些额外的信息可以帮助您理解导入/导出的概念：
Import

Export

Video

你的代码非常好。这是每个文件的样子。

SampleApp.js

var React = require('react-native');
import PageOne from './PageOne';
import PageTwo from './PageTwo';

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

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = 
  Object.assign(
    {}, 
    BaseConfig.gestures.pop, 
    { snapVelocity: 8, edgeHitWidth: SCREEN_WIDTH }
  );

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  springTension: 100,
  springFriction: 1,
  gestures: { pop: CustomLeftToRightGesture }
});


var SampleApp = React.createClass({
  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <PageOne navigator={navigator} />
    } else if (route.id === 2) {
      return <PageTwo navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
    return (
      <Navigator
        initialRoute={{id: 1, }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
  }
});

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

module.exports = SampleApp;

PageOne.js

var PageOne = React.createClass({
  _handlePress() {
    this.props.navigator.push({id: 2,});
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'green'}]}>
        <Text style={styles.welcome}>Greetings!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, 
                        backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go to page two</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

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

// This is important because without exporting PageOne,
// you cannot import it in SampleApp.js
export default PageOne;

PageTwo.js

var PageTwo = React.createClass({
  _handlePress() {
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
        <TouchableOpacity onPress={this._handlePress}>
          <View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
            <Text style={styles.welcome}>Go back</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

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

export default PageTwo;

在React Native Android中的屏幕之间导航？

1 个答案: