React Native --react-navigation

xiaoxiao2021-02-28  93

从0.44版本开始,Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator,则需要先npm i -S react-native-deprecated-custom-components,然后从这个模块中import,即import { Navigator } from 'react-native-deprecated-custom-components'.

React Navigation:

1.首先在应用中安装此库: $npm install --save react-navigation.

2.导入:import {StackNavigator} from 'react-navigation';

Demo1:

import React, { Component } from 'react'; import { AppRegistry, Text, View, Button, } from 'react-native'; import { StackNavigator} from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', headerRight: <Button title="More"/>, } render() { const {navigate} = this.props.navigation; return ( <View> <Text>Hello, Navigator</Text> <Button onPress = {() => navigate('Chat', {user: 'cece'})} title='start to chat' > </Button> </View> ); } } class ChatScreen extends Component { static navigationOptions = { title: 'Chat with friends', } render() { const {params} = this.props.navigation.state; return( <View><Text>chat with {params.user}</Text></View> ); } } const SimpleApp = StackNavigator({ Home: {screen: HomeScreen}, Chat: {screen: ChatScreen}, }); AppRegistry.registerComponent('HiFang', () => SimpleApp);

2. Nesting Navigators

首先import TabNavigator.

import React from 'react'; import { TabNavigator} from 'react-navigation'; import { AppRegistry, Text, View, Button, } from 'react-native'; class ChatScreen extends React.Component { render() { return <Text>comment list</Text>; } } class ContactScreen extends React.Component { render() { return <Text>contact list</Text>; } } const ScreenNavigator = TabNavigator({ Comment: {screen: ChatScreen}, Contact: {screen: ContactScreen}, }); AppRegistry.registerComponent('HiFang', () => ScreenNavigator);

转载请注明原文地址: https://www.6miu.com/read-62954.html

最新回复(0)