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

Question

提问by Eusthace

After check the React Native documentation, I still don't understand the best way to create views and navigate between different components.

查看 React Native 文档后，我仍然不明白创建视图和在不同组件之间导航的最佳方式。

I don't want to use any external components like:

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

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

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

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

I don't need a Navigation bar, i just want to set views and slide left, right o pop a view, nothing more.

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

I know is something basic, but I can't find any helpful example.

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

Please, anyone can help me? Any functional example in https://rnplay.org/?

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

Thank you.

谢谢你。

Answer 1

采纳答案by rob-art

UPDATE 04/2018 :

更新 04/2018：

Things have change since my first answer, and today two massive libraries are relevant for navigation : react-navigation and react-native-navigation.

自从我的第一个回答以来，情况发生了变化，如今有两个庞大的库与导航相关：react-navigation 和 react-native-navigation。

I will wrote an example for react-navigation which is an easy to use library and full JS maintain by serious people from the community.

我将为 react-navigation 编写一个示例，它是一个易于使用的库，并且由来自社区的认真人员维护。

First install the library :

首先安装库：

yarn add react-navigation

or

或者

npm install --save react-navigation

Then in your app entry point (index.js) :

然后在您的应用程序入口点 (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);

You can see that we pass an object to the StackNavigator, it's all ours screens configuration, here is an example of configuration :

可以看到我们向 StackNavigator 传递了一个对象，这是我们所有的屏幕配置，这里是一个配置示例：

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

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

Now the app know each screen we got. We can simply tell the "navigate" function to go to our Setting Screen. Let's watch our Home Screen :

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

class HomeScene extends Component {

      constructor(props) {
          super(props);
      }

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

        );
      }
    }

As you can see, the navigation will hydrate the props. And from here you can make what you want.

如您所见，导航将为道具补水。从这里你可以制作你想要的东西。

Go to the library documentation to see all you can do : change the header type, the title, navigation type, ...

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

PREVIOUS ANSWER :

以前的答案：

Watch this example: https://github.com/h87kg/NavigatorDemo

观看这个例子：https: //github.com/h87kg/NavigatorDemo

It's useful and a well written Navigator example, better than the one above you just wrote, I think.

它很有用，而且是一个写得很好的 Navigator 示例，我认为比上面你刚刚写的要好。

Mainly watch the relationship between LoginPage.jsand MainPage.js

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

Answer 2

回答by Eusthace

I've found this example: https://rnplay.org/apps/HPy6UA

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

And I've written a tutorial about it: https://playcode.org/navigation-in-react-native/

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

It's really helpful to understand the 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;

Answer 3

回答by locropulenton

I suggest you use react-navigationyou can take a look to the Navigator Playground example

我建议您使用react-navigation您可以查看 Navigator Playground示例

Components built for iOS and Android
Choose between TabNavigator, DrawerNavigatorand StackNavigator.
Implement your CustomNavigator
Develop your own navigation views
Share logic between mobile apps, web apps with server rendering.
Documentationis pretty straighforward
It is redux integrated.
It is super easy!
Will become the official navigator suggested by react-native!

为 iOS 和 Android 构建的组件
在TabNavigator、DrawerNavigator和StackNavigator之间进行选择。
实施您的CustomNavigator
开发自己的导航视图
在移动应用程序、具有服务器渲染的 Web 应用程序之间共享逻辑。
文档非常简单
它是 redux 集成的。
超级简单！
将成为 react-native 推荐的官方导航器！

Install navigation module.

安装导航模块。

npm install --save react-navigation

Import it in your app

将其导入您的应用程序

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

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

...and navigate

...并导航

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')}
      />
    );
  }
}

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

提问by Eusthace

采纳答案by rob-art

回答by Eusthace

回答by locropulenton

相关推荐

最近更新

标签

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

提问by Eusthace

采纳答案by rob-art

回答by Eusthace

回答by locropulenton

相关推荐

Javascript 反应路由器授权

Javascript NodeJS：如何获取服务器的端口？

Javascript 如何设置 VSCode 将花括号放在新行上？

Javascript 如何在javascript中将字符串转换为对象的字段名称

相关推荐

最近更新

标签