Javascript React原生Android中视图之间的导航示例？

在查看React本机文档之后，我仍然不了解在不同组件之间创建视图和导航的最佳方法

我不想使用任何外部组件，如：

我不需要导航栏，我只想设置视图并向左、向右滑动以弹出视图，仅此而已

我知道这是一些基本的东西，但我找不到任何有用的例子

拜托，有人能帮我吗？中有功能示例吗

谢谢。

我发现了这个例子：

我写了一篇关于它的教程：

了解React Native中的导航非常有帮助：

'use strict';

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, {
  // Make it snap back really quickly after canceling 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;

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
领航员，
可触摸不透明度，
}=反应；
var SCREEN_WIDTH=require（'Dimensions'）.get（'window'）.WIDTH；
var BaseConfig=Navigator.sceneconfig.FloatFromRight；
var customLeftToRightSpiration=Object.assign（{}，BaseConfig.pirters.pop{
//取消pop后，使其快速恢复
速度：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；

2018年4月更新：

自从我第一次回答以来，情况发生了变化，今天有两个大型库与导航相关：react导航和react本地导航

我将为react navigation编写一个示例，它是一个易于使用的库，由社区的严肃人士维护完整的JS

首先安装库：

yarn add react-navigation

或

然后在应用程序入口点（index.js）中：

您可以看到，我们将一个对象传递给StackNavigator，这都是我们的屏幕配置，下面是一个配置示例：

import HomeScreen from "./HomeScreen";
import SettingsScreen from "./SettingsScreen";

const Config = {
      navigation: {
          Home: {
            screen: HomeScreen
          },
          Settings: {
            screen: SettingsScreen,
          }
       }
    }

现在应用程序知道了我们得到的每个屏幕。我们可以简单地告诉“导航”功能转到我们的设置屏幕。 让我们看一下主屏幕：

class HomeScene extends Component {

      constructor(props) {
          super(props);
      }

      render () {
        return (
        <View>
            <Button
              title="Go to Settings"
              onPress={() => this.props.navigation.navigate('Settings')}
            />
        </View>

        );
      }
    }

类HomeScene扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
this.props.navigation.navigate（'Settings'）}
/>
);
}
}

如您所见，导航将为道具添加水分。从这里你可以做你想要的

转到库文档查看所有您可以做的事情：更改标题类型、标题、导航类型

先前的答案：

看这个例子：

这是一个很有用的、写得很好的导航器示例，我认为它比您刚才编写的示例要好

主要观察

LoginPage.js

和

MainPage.js

之间的关系，我建议你使用，你可以看看导航栏

• 为iOS和Android构建的组件
• 在、和之间选择
• 实施你的
• 发展自己
• 在移动应用程序、具有服务器渲染的web应用程序之间共享逻辑
• 这是非常严格的
• 它是redux集成的
• 这是超级容易
• 将成为react native建议的官方导航器

安装导航模块

npm install --save react-navigation

在应用程序中导入它

import {
  TabNavigator,
} from 'react-navigation';

const BasicApp = TabNavigator({
  Main: {screen: MainScreen},
  Setup: {screen: SetupScreen},
});

…并导航

class MainScreen extends React.Component {
  static navigationOptions = {
    label: 'Home',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Setup Tab"
        onPress={() => navigate('Setup')}
      />
    );
  }
}

class主屏幕扩展了React.Component{
静态导航选项={
标签：“家”，
};
render（）{
const{navigate}=this.props.navigation；
返回(
导航（'Setup'）}
/>
);
}
}

您所描述的内容符合

导航器的要求

这是一个在我的android设备上经过测试和运行的示例。谢谢你能告诉我，如何在开发android应用程序时发现错误吗。我使用的是android studio，每当出现任何错误，比如意外令牌，都很难找到确切的错误。您可以将设备连接到计算机，并使用chrome进行调试，以检查控制台日志：@MohamedHussien上的DPlease report issue on@MohamedHussien您是否在项目目录中？返回的错误是什么？到目前为止，我对react navigation没有任何不满，文档不好，可能是因为您正在开发简单的hello world应用程序，但如果您需要复杂的导航，它确实不清楚。我知道API自项目开始以来已经发生了变化，但项目非常棒，查看以下示例，了解如何自定义转换。可以告诉我们另外，我们如何将动态值或对象从一个页面传递到另一个页面？我尝试了大量的例子/解决方案，但没有成功。你可以在LoginPage.js的第36行传递一些道具。然而，自从我回答这个问题以来，navigator

import {
  TabNavigator,
} from 'react-navigation';

const BasicApp = TabNavigator({
  Main: {screen: MainScreen},
  Setup: {screen: SetupScreen},
});

class MainScreen extends React.Component {
  static navigationOptions = {
    label: 'Home',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Setup Tab"
        onPress={() => navigate('Setup')}
      />
    );
  }
}