React-Native给前端带来了新视野,可以使用web开发语言javascript来实现Native开发(ios/android),现在的前端能做的事情就更多了。
react-navigation的使用
react-native中使用导航器来实现native的路由功能,可是官网说的太简略了,唯一指出的一篇入门文档,还是英语。
效果图示
基础知识
先吧react-navigation的基本知识做一个梳理,仅仅使用的是我们项目中常用的几个点。
首先,引入react-navigation
和引入其它模块的方式一样。先下载对应的依赖包。
npm install --save react-navigation
- 1
在项目中用到的地方引入。
import { StackNavigator,TabNavigator } from "react-navigation";
- 1
最后进行路由配置:
/**
* @App:我的项目中简单的路由配置
*/
const MyApp = TabNavigator({
Login:{
screen:LoginScreen
},
OtherLogin:{
screen:OtherLoginScreen
}
},{
tabBarOptions:{
inactiveTintColor: '#000',
activeTintColor: Env.color.mainColor,
style:{
backgroundColor:"#fff",
},
labelStyle:{
fontSize: Env.screen.baseFontSize * 30
}
}
});
/**
* 说明:App就是一个路由配置,StackNavigator的参数是一个对象。这个对象的属性代表路由,属性值代表路由对应的界面,也可以代表另外一个路由配置(MyApp不是一个界面,二是一个TabNavigator)。
*/
var App = StackNavigator({
Login:{screen:MyApp},
Register:{screen:RegisterScreen},
Home: {
screen:HomeScreen
},
Search: {
screen:SearchScreen
},
SearchResult:{
screen:SearchResultScreen
},
WatchMap:{
screen:WatchMapScreen
},
Destination:{
screen:DestinationScreen
},
SetPage:{
screen:SetPageScreen
},
ChatPage:{
screen:ChatPageScreen
}
},{
headerStyle:{
height:0
},
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
其次,react-navigation的 ‘TabNavigator‘ 和 ‘StackNavigator‘ 如何使用
StackNavigator:形成一个类似于‘栈‘这种数据结构的路由,一个新的界面加入,我们就push进去一个screen,如果退出,则使用pop() 的方式一步步回退到最顶层路由。
简单demo示例:
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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
TabNavigator:同理,也能够进行这样的一个简单配置
import { TabNavigator } from "react-navigation";
//界面1
class RecentChatsScreen extends React.Component {
render() {
return <Text>List of recent chats</Text>
}
}
//界面2
class AllContactsScreen extends React.Component {
render() {
return <Text>List of all contacts</Text>
}
}
/**
*@info:下面这样的配置。形成了一个tab界面,可以有点击切换的效果。
**/
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
再次,基本配置config
关于一个基本的tab切换,本身的样式很重要,在navigationOptions中进行配置。
//项目示例
export default class LoginScreen extends Component{
constructor(props){
super(props);
_this = this;
}
//在一个Screen中,这里就是基本的配置,其中title就是你的导航器最上面的标题,headerRight代表你导航的右边是什么,headerStyle代表导航样式,headerTitleStyle代表导航标题的样式。
//如果你的这个screen是一个tab页面,你还需要设定一个tabBarLabel,这个代表
static navigationOptions = {
title:"账号登录",
headerRight:<TouchableOpacity onPress={()=>{
_this.props.navigation.navigate('Register')
}}><Text style={[estyle.font_base,estyle.font_color_white,estyle.marginRight]}>注册</Text></TouchableOpacity>,
headerTintColor: Env.color.baseColor,
headerStyle:{
backgroundColor: Env.color.mainColor,
},
headerTitleStyle:{
paddingLeft:Env.screen.baseFontSize * 250,
},
tabBarLabel:"账号密码登录",
};
render(){
let _this = this;
return (
<View style={[estyle.fx1,estyle.paddingTop]}>
<InputComponent them="手机" prompt="请输入手机"/>
<InputComponent them="密码" prompt="请输入密码"/>
<View style={[estyle.hegithLittle,estyle.clumnCenter,estyle.marginRight,{alignItems:'flex-end'}]}>
<Text style={[estyle.font_note,estyle.font_color_note]}>忘记密码</Text>
</View>
<View style={[estyle.hegithBase,estyle.rowCenter]}>
<BtnComponent style={[{width:Env.screen.width * 0.8,height:Env.screen.baseFontSize * 100}]} />
</View>
</View>
)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
有时候,你可以能对tab界面的导航样式进行配置,可以在TabNavigator中进行基本的配置:
const MyApp = TabNavigator({
Login:{
screen:LoginScreen
},
OtherLogin:{
screen:OtherLoginScreen
}
},{
//这个是关键配置,inactive代表非当前展示界面,active代表当前展示界面,style代表基本的样式,labelStyle代表一个tab界面字体的相关设置。
tabBarOptions:{
inactiveTintColor: '#000',
activeTintColor: Env.color.mainColor,
style:{
backgroundColor:"#fff",
},
labelStyle:{
fontSize: Env.screen.baseFontSize * 30
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
以上就是一个基本的配置,如果需要仔细研究,我的项目github地址
https://github.com/liwudi/we_travel_native.git
关于导航器的官网入门教程:
https://reactnavigation.org/docs/intro/