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

Question

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

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

请添加示例代码我是新来阵营本地 ...

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, { 

//使其成为取消弹出

 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;