常用的react native组件-react-navigation

注:个人积累,慢慢补齐

1、import StackNavigator
[code]
import {
StackNavigator,
} from ‘react-navigation’;
[/code]

2、navigationOptions设置
在Component里面定义:
[code]
static navigationOptions = ({ navigation }) => ({
title: navigation.state.params.movie.title,
headerStyle: styles.Navigator,
titleStyle: styles.Navigator_txt,
headerTintColor: "rgba(255, 255, 255, 0.8)"
});
[/code]

可以通过navigation参数获取导航切换的 this.props.navigation
参数获取: this.props.navigation.state.params.movie

3、定义screen
[code]
const Navigator_MovieList = StackNavigator({
Main: {screen: MovieList},
MovieDetail: {screen: MovieDetail}
});
export { Navigator_MovieList as default };
[/code]

当前的组件StackNavigator后再导出,

4、navigate对象操作
[code]
const {navigate} = this.props.navigation;
navigate(‘MovieDetail’, {movie: movie})
[/code]

使用navigation后在props有navigation,使用navigate方法可以切换导航的页面(movie是参数)

发表评论

邮箱地址不会被公开。 必填项已用*标注