Fatal编程技术网
  • android/
  • 在本机Android中的屏幕间导航？

在本机Android中的屏幕间导航？

android reactjs react-native

在本机Android中的屏幕间导航？,android,reactjs,react-native,Android,Reactjs,React Native,我使用了此代码及其工作 但是我想通过将页面保存在不同的.js文件中来完成相同的过程 并使用导航器进行导航 请添加示例代码，我是新来的，以响应本机… var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, Navigator, TouchableOpacity, } = React; va

我使用了此代码及其工作

但是我想通过将页面保存在不同的.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, {
//取消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;

snapVelocity:8，
//这样我们就可以拖动屏幕上的任何地方
边缘宽度：屏幕宽度，
});
var CustomSceneConfig=Object.assign（{}，BaseConfig{
//一个绕得很紧的弹簧会使这种转变很快
弹簧张力：100，
弹簧摩擦：1，
//使用上面定义的自定义手势
手势：{
pop:CustomLeftToRight手势，
}
});
var PageOne=React.createClass({
_女佣（）{
this.props.navigator.push（{id:2，}）；
},
render（）{
返回(
问候语！
转到第二页
)
},
});
var PageTwo=React.createClass({
_女佣（）{
this.props.navigator.pop（）；
},
render（）{
返回(
这是第二页！
回去
)
},
});
var SampleApp=React.createClass({
_renderScene（路线、导航器）{
如果（route.id==1）{
返回
}else if（route.id==2）{
返回
}
},
_配置场景（路线）{
返回CustomSceneFig；
},
render（）{
返回(
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
颜色：'白色'，
},
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；
module.exports=SampleApp；
要在页面之间导航，需要3个组件（react类）。一个用于导航器（此处为SampleApp），一个用于第一页，一个用于第二页。建议每个js文件有一个组件。因此，您需要创建一个名为PageOne.js、PageTwo.js和SampleApp.js的文件。当您想要呈现存储在另一个文件中的组件时，您需要像这样导入它。
import PageOne from./path/PageOne'从另一个文件访问变量的唯一方法是导入它，但如果不先导出变量，它将不起作用。导出一个变量基本上就是说这个代码块可以在另一个文件中使用。可以从文件中导出多个变量。以下是一些帮助您理解导入/导出概念的附加信息：







您的代码非常好，就像这样。下面是每个文件的外观

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;



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;



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;



var React=require（'React-native'）；
从“/PageOne”导入PageOne；
从“/PageTwo”导入PageTwo；
var{
评估学，
样式表，
文本，
看法
领航员，
可触摸不透明度
}=反应；
var SCREEN_WIDTH=require（'Dimensions'）.get（'window'）.WIDTH；
var BaseConfig=Navigator.sceneconfig.FloatFromRight；
var customLeftToRightSprotation=
Object.assign(
{}, 
BaseConfig.signatures.pop，
{snapVelocity:8，edgeHitWidth:SCREEN_WIDTH}
);
var CustomSceneConfig=Object.assign（{}，BaseConfig{
弹簧张力：100，
弹簧摩擦：1，
手势：{pop:CustomLeftToRight手势}
});
var SampleApp=React.createClass({
_renderScene（路线、导航器）{
如果（route.id==1）{
返回
}else if（route.id==2）{
返回
}
},
_配置场景（路线）{
返回CustomSceneFig；
},
render（）{
返回(
);
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；
module.exports=SampleApp；


PageOne.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;



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;



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;



var PageOne=React.createClass({
_女佣（）{
this.props.navigator.push（{id:2，}）；
},
render（）{
返回(
问候语！
转到第二页
)
},
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
颜色：'白色'，
},
});
//这很重要，因为如果不导出PageOne，
//无法在SampleApp.js中导入它
导出默认第一页；


PageTwo.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;



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;



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;



var PageTwo=React.createClass({
_女佣（）{
this.props.navigator.pop（）；
},
render（）{
返回(
这是第二页！
回去
)
},
});
var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
颜色：'白色'，
},
});
导出默认页面2；

我厌倦了相同的示例，但出现了一个错误：React Native-找不到变量：title。。。。代码更改：类名扩展了组件{{u renderScene（route，navigator）{if（route.id==1）{return}else如果（route.id==2）{return}}}}{u configureScene（route）{return BaseConfig；}render（）{return（）；}您需要为路由指定一个标题。你好{route.title}！}style={{padding:100}/>即使我厌倦了相同的代码var SampleApp=React.createClass（）或ClassName extends Component{}也会得到相同的错误这很正常，因为您需要向每个路由com传递一个标题