(三)React Native中Navigation组件的快速入门
前言最近在看React Native中导航组件Navigation的用法,它是github上的一个插件,说实话,比原生的Navigator组件好用得多,刚开始看原生的导航组件Navigator那真是一个个坑,到现在也有很多东西没解决。前几天突然在Github上找到一个Navigation组件,简单看了下,环境几乎不费力的就搭好了,它的github地址,官网地址。 官网上关于它的用法讲解已经比较详细了,这里只是简单记录下。 介绍React Navigation诞生于React Native社区,它是被需要于一种可扩展的容易使用的解决方案。它用来替换原生几个系统的Navigator库,包括Ex-Navigation,Navigator和NavigationExperimental组件,React Navigation作为一种更高水平的代码也可以被用作React项目。 环境搭建1.初始化一个项目 2.安装navigation组件 npm install --save react-navigation
接下来就可以通过import导入放心使用 快速入门对于我们的app,我们去用 一个screen看HomeScreen代码 import React from 'react';
import {
AppRegistry,Text,} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',};
render() {
return <Text>Hello,Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },});
AppRegistry.registerComponent('SimpleApp',() => SimpleApp);
screen的title是通过 现在看下效果 多个Screen再添加一个Screen,暂且称作为:ChatScreen class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
然后我们在主Screen中添加一个button,通过这个button链接到ChatScreen,链接的方法是通过一个路由名 Chat指定,这个Chat可以随意命名。修改主Screen中代码: class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello,Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});
每添加一个screen可以通过StackNavigator注册 看下效果: 传递参数先看下代码 class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',Chat App!</Text>
<Button
onPress={() => navigate('Chat',{ user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
我们可以看见,通过这样的形式传递了代码 class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: navigation.state.params.user,});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
看下效果: 至此快速入门就到这里了。 最后今天先到这里了. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |