React Navigation
|
https://reactnavigation.org/docs/intro/nesting 官网
什么是react-navigation?
属性
screenProps之前是没有介绍这个属性的，但经过这么久发现，很多人都不知道这个属性，不知道它能干嘛，在这里我就简单的介绍下
// 假设App就是项目中的入口文件，如果还不知道，可以看下Demo，在这里我将主题色通过screenProps属性修改成'red'
<App screenProps={{themeColor:'red'}}>
// 在页面中就可以通过screenProps来直接改变了，这个在Demo
中的Test2里面
static navigationOptions = ({navigation,screenProps}) => ({
// 这里面的属性和App.js的navigationOptions是一样的。
headerStyle:{backgroundColor:screenProps?
screenProps.themeColor:
'#4ECBFC'},)
})
StackNavigator 基础用法/属性介绍(跳转和传参数)app.js import { StackNavigator } from 'react-navigation';
import Home from "./components/Home" //外部自己的组件
import My from "./components/My" //外部自己的组件
//相当于设置路由组件集,第一个相当于入口，最后render中返回这个类似组件集的组件<SimpleApp/>
const SimpleApp = StackNavigator({
Home: {
screen: Home,//要跳转的组件
navigationOptions:{
headerTitle:'详情' //跳转过去的title
}
},My:{
screen:My
}
});
export default class App extends Component<{}> {
render() {
return (
<SimpleApp/>
);
}
}
Home.js(实现跳转) .........
render() {
const { navigate } = this.props.navigation; //获得navigate
return (
<View style={styles.container}>
<Text
onPress={()=>{
navigate('My',{user:"纯纯"}) //跳转并传参数过去，参数名为user，值为纯纯
}}
>111</Text>
</View>
);
}
My.js(接受参数) render() {
const { params } = this.props.navigation.state; //获取参数集
return (
<View style={styles.container}>
<Text>444{params.user}</Text> //接收到参数
</View>
);
}
导航配置
// 设置滑动返回的距离
gestureResponseDistance:{horizontal:300},
导航视觉效果
TabNavigator 基础用法/属性介绍import {TabNavigator} from 'react-navigation';
const MyTab = TabNavigator({
ShiTu: {
screen: ShiTu,navigationOptions:{
tabBarLabel: '识兔',tabBarIcon: ({tintColor}) => (
<Image
source={{uri : '识兔'}}
style={[tabBarIcon,{tintColor: tintColor}]}
/>
),},}
},{
tabBarPosition: 'bottom',swipeEnabled:false,animationEnabled:false,tabBarOptions: {
style: {
height:49
},activeBackgroundColor:'white',activeTintColor:'#4ECBFC',inactiveBackgroundColor:'white',inactiveTintColor:'#aaa',showLabel:false,}
);
.....
render中返回<MyTab/>
render() {
return (
<MyTab/>
);
}
屏幕导航配置
tabBarOnPress:(({ route,jumpToIndex)=>{
// console.log(route);
// alert(index);
// 只有调用jumpToIndex方法之后才会真正的跳转页面。
jumpToIndex(index);
}),
标签栏配置
iOS属性
安卓属性
跳转this.props.navigation.navigate('Chat',{ user: 'Lucy' })
回调传参navigate('Detail',{
// 跳转的时候携带一个参数去下个页面
callback: (data)=>{
console.log(data); // 打印值为：'回调参数'
}
});
const {navigate,goBack,state} = this.props.navigation;
// 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
goBack();
让安卓实现push动画之前我群里的讨论怎么让安卓实现类似iOS的push动画，后来翻看官方issues的时候，真的发现了实现push动画的代码，在这里共享下 / 先引入这个方法
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
// 在StackNavigator配置headerMode的地方，使用transitionConfig添加
{
headerMode: 'screen',transitionConfig:()=>({
screenInterpolator:CardStackStyleInterpolator.forHorizontal,})
} （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |