### react-navigation demo
* * * * *
通过一个简单的实例来讲解react-navigation的使用。
效果图：
目录结构：
~~~
|- src
|-component
-Detail1.js
-Home.js
-Mine.js
|-App.j
~~~
~~~
// App.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import {TabNavigator, StackNavigator} from 'react-navigation';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Home from './src/component/Home';
import Mine from './src/component/Mine';
import Detail1 from './src/component/Detail1';
const Tab = TabNavigator({
Home: {
screen: Home,
navigationOptions:()=>navigationOpts({
tabBarLabel: "首页",
headerTitle: "首页Header",
headerLeft:null, //去除返回按钮
tabBarIcon: (({tintColor, focused}) => { //tabBar图标
return (
<FontAwesome name="home" style={{color: tintColor, fontSize: 24}}/>
)
}),
})
},
Mine: {
screen: Mine,
navigationOptions:()=>navigationOpts({
tabBarLabel: "我的",
headerTitle: "我的Header",
headerLeft:null, //去除返回按钮
tabBarIcon: (({tintColor, focused}) => { //tabBar图标
return (
<FontAwesome name="user" style={{color: tintColor, fontSize: 24}}/>
)
}),
})
}
});
// 需要调整的页面都需要在这里注册
const App = StackNavigator({
Tab: {
screen: Tab
},
Mine: {
screen: Mine
},
Home: {
screen: Home
},
Detail1: {
screen: Detail1,
navigationOptions:()=> navigationOpts({
headerTitle: "Detail1"
})
}
});
const navigationOpts = (opt)=>{
let defaultOpt = {
//StackNavigator
headerTitle: "", //顶部header名字
headerTitleStyle: { //顶部header名字样式。
fontSize: 18,
color: '#fff',
alignSelf: 'center' //安卓上文字居中
},
headerStyle: { // header样式
backgroundColor: '#10AEFF',
elevation: 0, //去掉安卓导航条底部阴影
shadowOpacity: 0 //iOS去掉阴影
},
headerBackTitleStyle: {}, // 顶部header 返回文字 样式
tabBarVisible: true,
headerBackTitle: null,
headerTintColor: '#fff', //返回箭头颜色
headerRight: "",
gesturesEnabled: true, // 是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
//TabNavigator
tabBarVisible: true, //tab栏显示
tabBarLabel: "", //tabBar 名字
tabBarPosition: 'bottom', // 设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom')
swipeEnabled: false, // 是否允许在标签之间进行页面滑动。
animationEnabled: false, // 是否在更改标签时显示动画。
lazy: true, // 是否根据需要懒惰呈现标签，而不是提前制作，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。
initialRouteName: '', // 设置默认的页面组件
backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
// ***iOS属性***
// 因为第二个tabbar是在页面中创建的，所以前景色的设置对其无效，当然也可以通过设置tintColor使其生效
activeTintColor: '#10AEFF', // label和icon的前景色 活跃状态下（选中）。
inactiveTintColor: '#999', // label和icon的前景色 不活跃状态下(未选中)。
activeBackgroundColor: '#fff', //label和icon的背景色 活跃状态下（选中） 。
inactiveBackgroundColor: '#fff', // label和icon的背景色 不活跃状态下（未选中）。
showLabel: true, // 是否显示label，默认开启。tab文字
// style:{}, // tabbar的样式。
// labelStyle:{}, //label的样式。
// ***安卓属性***
// activeTintColor:'', // label和icon的前景色 活跃状态下（选中） 。
// inactiveTintColor:'', // label和icon的前景色 不活跃状态下(未选中)。
showIcon: true, // 是否显示图标，默认关闭。
// showLabel:true, //是否显示label，默认开启。
// style:{}, // tabbar的样式。
// labelStyle:{}, // label的样式。
upperCaseLabel: false, // 是否使标签大写，默认为true。
// pressColor:'', // material涟漪效果的颜色（安卓版本需要大于5.0）。
// pressOpacity:'', // 按压标签的透明度变化（安卓版本需要小于5.0）。
// scrollEnabled:false, // 是否启用可滚动选项卡。
// tabStyle:{}, // tab的样式。
// indicatorStyle:{}, // 标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
// labelStyle:{}, // label的样式。
// iconStyle:{}, // 图标的样式。
},
tabBarIcon: (({tintColor, focused}) => { //tabBar图标
return (
<IconFont name="profile" style={{color: tintColor, fontSize: 24}}/>
)
}),
}
return Object.assign(defaultOpt, opt);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
~~~
~~~
// Home.js
import React, { Component } from 'react';
import {
Text,
View
} from 'react-native';
export default class Home extends Component {
render(){
return (
<View>
<Text>Home</Text>
<Text onPress={()=>{
const { navigate } = this.props.navigation;
navigate('Detail1', {
id: 1
});
}}>跳转到Detail1页面</Text>
</View>
)
}
}
~~~
~~~
// Mine.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class Mine extends Component {
render(){
return (
<View>
<Text>Mine</Text>
</View>
)
}
}
~~~
~~~
// Detail1.js
import React, { Component } from 'react';
import {
Text,
View
} from 'react-native';
export default class Detail1 extends Component {
render(){
const {params} = this.props.navigation.state;
return (
<View>
<Text>我是从Home页面点击跳转过来的,传递过来的参数{params.id}</Text>
<Text onPress={()=> {
this.props.navigation.goBack(null)
}}>返回(可以点击左上角，也可以点击这里返回)</Text>
</View>
)
}
}
~~~
**参考资料：**
* Facebook力推导航库:React Navigation使用详解
* React-Navigation与Redux整合详解
* 官方文档
