在React Native Android中的视图之间导航示例？

Question

检查React Native文档后,我仍然不了解创建视图和在不同组件之间导航的最佳方法.

我不想使用任何外部组件,如:

https://github.com/Kureev/react-native-navbar/

https://github.com/23c/react-native-transparent-bar

https://github.com/superdami/react-native-custom-navigation

我不需要导航栏,我只想设置视图并向左滑动,向右滑动视图,仅此而已.

我知道是基本的东西,但我找不到任何有用的例子.

拜托,有人可以帮帮我吗？https://rnplay.org/中的任何功能示例？

谢谢.

Answer 1

更新04/2018:

自我的第一个答案以来,情况发生了变化,今天两个大型图书馆与导航相关:反应导航和反应原生导航.

我将为react-navigation编写一个示例,这是一个易于使用的库,并且由来自社区的认真人员进行完整的JS维护.

首先安装库:

yarn add react-navigation

要么

npm install --save react-navigation

然后在你的app入口点(index.js):

import Config from './config';

import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);

你可以看到我们将一个对象传递给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>

        );
      }
    }

如您所见,导航将保湿道具.从这里你可以做出你想要的东西.

转到库文档以查看您可以执行的所有操作:更改标题类型,标题,导航类型,...

以前的答案:

观看此示例:https: //github.com/h87kg/NavigatorDemo

它是有用的,并且是一个写得很好的Navigator示例,比我刚才写的更好,我想.

主要是看之间的关系LoginPage.js和MainPage.js

Answer 2

我找到了这个例子:https: //rnplay.org/apps/HPy6UA

我写了一篇关于它的教程:https: //playcode.org/navigation-in-react-native/

理解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;