一、安装包
- 安装react-navigation。
yarn add react-navigation
# or with npm
# npm install --save react-navigation
- 安装react-native-gesture-handler.
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
- 引入原生库到项目中。
react-native link react-native-gesture-handler
二、使用
- 初始化路由
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
}, {
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
或者：
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
- 在屏幕中移动
- 没有跳转效果：
this.props.navigation.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Details' })
],
}))
- 有push、pop效果
this.props.navigation.navigate('Details')
navigate功能大致意味着“转到此屏幕，如果要跳转的页面已经在屏幕上，它将不会有任何反应，如果要跳转的页面在之前的栈队列中，它将以pop的形式跳转回去。”
- push跳转
this.props.navigation.push("Details")
push代表都会向导航堆栈中添加新路径
- pop、popToTop跳转
this.props.navigation.pop(2, true)
<!-- 返回到栈顶 -->
this.props.navigation.popToTop()
- goBack返回
this.props.navigation.goBack()
- 页面间参数的传递
- 传递参数：
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
- 接收参数：
/* 2. Get the param, provide a fallback value if not available */
<!-- -->
const { navigation } = this.props;
<!-- 第一个参数为传递过来的参数的key，第二个参数为传递过来的参数的默认值 -->
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');
- 配置标题栏
- 普通的导航栏
static navigationOptions = {
title: 'Home',
};
- 在标题中使用params
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
- 通过修改prams参数的值修改导航的标题
this.props.navigation.setParams({ otherParam: 'Updated!' })}
- 修改导航标题的样式
自定义页眉的样式时，使用三个关键特性：headerStyle，headerTintColor，和headerTitleStyle。- headerStyle：将应用于View包装标头的样式对象。如果你设置backgroundColor它，那将是你的标题的颜色。
- headerTintColor：后退按钮和标题都使用此属性作为其颜色。在下面的示例中，我们将色调颜色设置为白色（#fff），因此后退按钮和标题标题将为白色。
-
headerTitleStyle：如果我们想自定义fontFamily，fontWeight等Text为标题样式属性，我们可以用它来做到这一点。
eg、
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
<!-- 值为：100、200、300、400、500、600、700、800、900、normal、bold -->
fontWeight: 'bold',
},
};
- navigationOptions跨屏共享
在构建navigationStack时，将defaultnavigationOptions加入stackConfi中。
/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
注意：在屏幕组件中定义的navigaitonOptions与其父堆栈导航的默认导航配置合并在一起时，会优先展示屏幕组件中定义的导航配置。
- 自定义导航标题
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('./assets/spiro.png')}
style={{ width: 30, height: 30 }}
/>
);
}
}
使用：
static navigationOptions = {
// headerTitle instead of title
headerTitle: <LogoTitle />,
};
- 标题按钮
- 在导航栏右侧添加一个按钮
headerRight: (
<Button
title="Info"
onPress={ () => Alert.alert("提示", "右边按钮")}
color="#fff"
/>
)
- 标题与其屏幕组件的交互
- 在组件挂载的时候，将要调用的方法注册成一个属性放在props里。
- 在导航栏按钮的点击方法里通过获取props里对应的属性值调用该方法。
eg、
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 });
};
- 重新返回按钮
- headerBackTitle 如果想要修改某个页面的返回按钮的标题，就在该页面的父级的navigationOptions里设置对应的值，如果不想显示任何文本，就设置为null，注意不能设置为空字符串，否则无效。
- headerTruncatedBackTitle 如果headerBackTitle设置的文本过长，就显示不出来了，可以使用headerTruncatedBackTitle设置一个默认的显示。
- headerBackImage 可以设置返回按钮的对应的图标。
