基本使用：
安装：npm install --save react-navigation
导入：import {StackNavigator} from 'react-navigation'
简单的例子：
创建一个StackNavigator
import {StackNavigator} from 'react-navigation'
import HomePage from "../pages/HomePage";
import Page1 from "../pages/Page1";
import Page2 from "../pages/Page2";
import Page3 from "../pages/Page3";
export const AppStackNavigator = StackNavigator(
{
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1,
},
Page2: {
screen: Page2,
},
}
)
App.js里面直接加载
import {AppStackNavigator} from './navigators/AppNavigators'
export default AppStackNavigator;
HomePage代码：
export default class HomePage extends Component<Props> {
render() {
const { navigation } = this.props
return (
<View style={styles.container}>
<Text style={styles.welcome}>来到HomePage</Text>
<Button title="跳转到Page1" onPress={()=>{navigation.navigate('Page1')}}/>
<Button title="跳转到Page2" onPress={()=>{navigation.navigate('Page2')}}/>
<Button title="跳转到Page3" onPress={()=>{navigation.navigate('Page3')}}/>
</View>
);
}
}
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,
},
});
运行结果：
运行结果
点击就能跳转
配置Navigator
- 整体配置：
export const AppStackNavigator = StackNavigator(
{
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1,
},
Page2: {
screen: Page2,
},
Page3: {
screen: Page3,
}
},
{
mode:'modal',
navigationOptions: {
headerTitleStyle:{color:'red'},
headerBackTitle: '返回',
title:'示例'
}
}
)
所有的title都变成“示例”了
- 单独配置：单独配置可以在两个地方进行配置
HomePage: {
screen: HomePage,
navigationOptions:{
title:'HomePage',
}
},
Page1: {
screen: Page1,
navigationOptions:{
title:'Page1',
}
},
在Page2文件中配置
static navigationOptions={
title:'Page2'
}
StackNavigatorConfig
router的选项：
-
initialRouteName- 设置堆栈的默认页面。 必须匹配RouteConfigs中的一个key。 -
initialRouteParams- 初始化路由的参数 -
navigationOptions- 用于页面的默认导航选项 -
paths- 用于覆盖RouteConfigs中设置的path的一个映射
视觉选项:
-
mode- 定义页面渲染和转换的风格：-
card- 使用标准的iOS和Android页面转换风格，此项为缺省。 -
modal- 使页面从屏幕底部滑入，这是一种常见的iOS模式。 只适用于iOS，在Android上不起作用。
-
-
headerMode- 定义标题该如何渲染：-
float- 渲染一个放在顶部的标题栏，并在页面改变时显示动画。 这是iOS上的常见模式。 -
screen- 每个页面上都有一个标题栏，标题栏与页面一起淡入淡出。 这是Android上的常见模式。 -
none- 没有标题栏
-
-
cardStyle- 使用这个属性覆盖或者扩展堆栈中单个Card的默认样式。 -
transitionConfig- 返回一个与默认页面的transitionConfig(参见类型定义)合并的对象的函数。 提供的函数将传递以下参数：-
transitionProps- 新页面跳转的属性。 -
prevTransitionProps- 上一个页面跳转的属性 -
isModal- 指定页面是否为modal。
-
-
onTransitionStart-card跳转动画开始时要调用的函数。 -
onTransitionEnd-card跳转动画结束时要调用的函数。
Screen Navigation Options
title
可当作headerTitle的备用的字符串。 此外，将用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的后备。
header
可以是React元素或给定了HeaderProps然后返回一个React元素的函数，显示为标题。 设置为null隐藏标题。
headerTitle
字符串、React元素或被当作标题的React组件。默认显示title属性的值。当使用一个组件时，它会收到allowFontScaling，style和children属性。 标题字符串在children中进行传递。
headerTitleAllowFontScaling
标题栏中标题字体是否应该缩放取决于文本大小是否可以设置。 默认为true。
headerBackTitle
iOS上的返回按钮的文字使用的字符串，或者使用null来禁用。 默认为上一个页面的headerTitle。
headerTruncatedBackTitle
当headerBackTitle不适合在屏幕显示时（一般是因为文字太多），返回按钮使用的标题字符串。 默认是Back。
headerRight
显示在标题栏右侧的React元素。
headerLeft
用于在标题栏左侧展示的React元素或组件。当一个组件被渲染时，它会接收到很多的属性（onPress, title, titleStyle 等等， - 请检查 Header.js 的完整列表）
headerStyle
标题栏的样式
headerTitleStyle
标题栏中标题的样式
headerBackTitleStyle
标题栏中返回按钮标题的样式
headerTintColor
标题栏的色调
headerPressColorAndroid
material design中的波纹颜色 (仅支持Android >= 5.0)
gesturesEnabled
是否可以使用手势来关闭此页面。 在iOS上默认为true，在Android上默认为false。
gestureResponseDistance
一个对象，用以覆盖从屏幕边缘开始触摸到手势被识别的距离。 它具有以下属性：
-
horizontal- 数值型 - 水平方向的距离，默认值25 -
vertical- 数值型 - 垂直方向的距离，默认值135.
gestureDirection
字符串，用来设置关闭页面的手势方向，默认（default）是从做往右，inverted是从右往左
动态改变navigator
-
上一个页面传入title
static navigationOptions = ({navigation}) => {
const {state, setParams} = navigation;
const {params} = state
return {
title: params.title ? params.title : 'this page2'
}
HomePage跳转的时候传值
<Button title="跳转到Page2" onPress={()=>{navigation.navigate('Page2',{title:'这是page2'})}}/>
-
根据页面事件改变 title 和 headerRight
Page3核心代码
export default class Page3 extends Component<Props> {
static navigationOptions = ({navigation}) => {
const {state, setParams} = navigation
const {params} = state
return {
title: '123',
headerTitleStyle: {fontSize: 20, color: "red"},
headerRight: (
<Button
title={params.mode === 'edit' ? '保存' : '编辑'}
onPress={() => {
setParams({mode: params.mode === 'edit' ? '' : 'edit'})
}}
/>
)
}
}
render() {
const {navigation} = this.props
const {state, setParams} = navigation
const {params} = state
return (
<View style={styles.container}>
<Text style={styles.welcome}>
欢迎来到page3
</Text>
<Button title="goBack" onPress={() => {
this.props.navigation.goBack()
}}></Button>
<TextInput style={styles.input} onChangeText={(text) => {
setParams({title: text, mode: text.length > 0 ? 'edit' : ''})
}}/>
</View>
);
}
}
const styles = StyleSheet.create({
input: {
height: 50,
borderWidth: 1,
marginTop: 20,
width: 200,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
HomePage跳转的时候传入mode
<Button title="跳转到Page3" onPress={()=>{navigation.navigate('Page3',{mode:'edit'})}}/>
title和rightheader就可以随着输入变化
网友评论