未完待续....
前言
先上效果图：学习导航的时候，网上的文章很多，但是看起来也越乱，学着学着就搞混了。没有一个系统的从浅到深的学习。知识点也容易遗漏。根据官网一步一步来，反而能够快速掌握。
（什么英文看不懂？）我刚开始也是看着迷糊，但是下载一个有道翻译，不明白的单词或者句子使用他翻译下，慢慢就习惯啦
GIF.gif
参考react-nvigation 2x文档进行学习。
官网资料
1)起步
2)create StackNavigator
3)config StackNavigator
4)界面跳转，navigate,poptoTop,pop等
5)路由传参
6)配置 head bar,导航
7)导航传参
8)setParams传参
9）自定义头部样式 header styles
10)分享公共的navigationOptions 配置
11）自定义组件代替标题
12）header跳转button
13)头部按钮访问组件实例函数
14）full-screen model
1.起步
安装指定版本 ：npm install react-navigation@2.9.1
2.create StackNavigator
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default createStackNavigator({
Home: {
screen: HomeScreen
},
});
这样就能简单实现一个首页啦。当然这样代码多了就不好啦。每个界面写成.js，在导入。增加一个details.js,自己动手创建一个吧，我们就可以这样写啦
3.config StackNavigator
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
界面跳转，navigate,poptoTop,pop等
在首页中增加一个按钮，点击按钮跳转到详情
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
在详情界面，我们也增加一个按钮，来跳转到首页，看看啥效果？
DetailsScreen
...
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.navigate('Details')}
/>
...
发现点击跳转不了。这里就涉及到其他知识点：
navigate（‘name’）,跳转到新界面，如果已在当前name界面，就不在跳转了,跳转的的界面会有返回箭头
push('name') 跳转到新界面，如果已在当前name界面，会继续创建新的screen,进行跳转
goback(),销毁当前界面
popToTop(),销毁所有界面回到初始化的第一个路由界面
自己试一试吧。这样下来，我们能进行界面切换啦，但是参数呢，参数怎么传
5路由传参
this.props.navigation.navigate('Details', {
data:"消息"
});
接收：
this.props.navigation.getParam('data',"默认数据")这样可以获得
另外一种方式
let {data} = this.props.navigation.state.params;
6.配置 headbar标题
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
}
class DetailsScreen extends React.Component {
static navigationOptions = {
title: 'Details',
};
}
像这样固定的写法，就能给相应的界面加上title啦。这样的优先级是最高的
7导航传参，就是标题中获取或者传递参数
写法就要变化啦
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('data', '默认值'),
};
};
}
8.setParams
...
/* Inside of render() */
<Button
title="Update the title"
onPress={() => this.props.navigation.setParams({data: '更新!'})}
/>
经历过这样的处理，headerbar的中关于navigation相关才能被识别出来
9自定义头部样式 header styles
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
/* render function, etc */
}
更多的设置api，请查看官方文档api
10分享公共的navigationOptions 配置,headerbar设置
比如每个界面的样色样式都差不多，那么就可以在createStackNavigator中去添加公共配置。
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);
如果每个界面有自己的navigationOptions，那这个相同的就不能起作用。这是设置共同的，那分享是什么意思呢？比如首页，和详情界面本来都一样，但是这是你想改下详情中的一些样式，沿用公共设置中的属性数据
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation, navigationOptions }) => {
const { params } = navigation.state;
return {
title: params ? params.otherParam : 'A Nested Details Screen',
/* These values are used instead of the shared configuration! */
headerStyle: {
backgroundColor: navigationOptions.headerTintColor,
},
headerTintColor: navigationOptions.headerStyle.backgroundColor,
};
};
/* render function, etc */
}
感觉用处不大
自定义组件代替标题
用图片logo来替换标题
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('./spiro.png')}
style={{ width: 30, height: 30 }}
/>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
// headerTitle instead of title
headerTitle: <LogoTitle />,
};
/* render function, etc */
}
12 header中的button
class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
};
}
13)头部按钮访问组件实例函数
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
参考
14）creact a model stack
一你要有个model界面。
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
这个model路由是跟首页和详情是一个级的。
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
在你想要展示的地方
onPress={() => navigation.navigate('MyModal')
