近期将项目中的 react native 升级到了 0.60.x 版本，同步的也将 React Navigation 升级到了 4.x。这篇博客记录了 4.x 版本的一些基本用法以及在实现项目中一些常见功能的实现，其中 rn 基于 0.60 版本。
安装
4.x 版本从 react-navigation 中移除了各类导航器，同时还依赖了一些其他的包需要手动安装。
npm install react-navigation react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
rn 0.60 版本之后，安装完成之后会自动 link，低版本安装过程见官网说明。
Android 端需要手动进行一些修改，编辑 android/app/build.gradle，在 dependencies 中添加如下内容：
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
WX20200113-140721.png
编辑 Android 中的 MainActivity.java，添加如下内容：
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
最后在 index.js 或者 app.js 中导入 react-native-gesture-handler 依赖即可。
import 'react-native-gesture-handler';
基本使用
4.x 版本移除了各类导航器，需要手动安装，这里安装一下 StackNavigator 和 BottomTabNavigator。
npm install react-navigation-stack @react-native-community/masked-view react-navigation-tabs
添加三个页面组件：
const Home = props => {
const { navigation } = props
return (
<View>
<TouchableOpacity onPress={() => navigation.push('Second')}>
<View>
<Text>Second page</Text>
</View>
</TouchableOpacity>
</View>
)
}
const My = () => {
return (
<View>
<Text>My</Text>
</View>
)
}
const Second = () => {
return (
<View>
<Text>Second</Text>
</View>
)
}
创建导航器，这一部分写法和之前一样：
const MainTab = createBottomTabNavigator({
Home,
My,
})
const AppStack = createStackNavigator({
Main: {
screen: MainTab,
},
Second,
})
export default function App() {
const AppContainer = createAppContainer(AppStack)
return <AppContainer />
}
screenshot-1.gif
调整 TabNavigator Header 标题
从上图可以看到，Home 和 My 页面顶部标题都是现实的 Main，因为这两个页面都在 BottomTabNavigator 中，共用了一个 Header。我们可以通过 Main 页面的 navigationOptions 来动态修改标题：
Main: {
screen: MainTab,
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index]
// You can do whatever you like here to pick the title based on the route name
const headerTitle = routeName
return {
headerTitle,
}
}
}
这里直接使用了 routeName 作为标题，也可以根据 routeName 匹配其他的标题文字。效果如下：
tab_title.gif
添加 Tabbar 图标
通过 BottomTabNavigator navigationOptions 中的 tabBarIcon 属性可以设置 Tabbar 的图标。
首先实现一个 TabbarIcon 组件，根据 routeName 返回相应的图片，同时图片会读取 tintColor 属性设置颜色：
const IMAGES = {
Home: require('./assets/icons/home.png'),
My: require('./assets/icons/my.png'),
}
const TabbarIcon = ({ routeName, tintColor }) => {
return (
<Image
source={IMAGES[routeName]}
style={[styles.image, { tintColor: tintColor }]}
resizeMode="contain"
/>
)
}
const styles = StyleSheet.create({
image: {
height: 24,
},
})
然后通过 BottomTabNavigator 的 defaultNavigationOptions 属性设置不同页面的图标：
defaultNavigationOptions: ({ navigation }) => {
const { routeName } = navigation.state
return {
tabBarIcon: props => <TabbarIcon {...props} routeName={routeName} />,
}
}
还可以通过 tabBarOptions 设置激活和未激活的颜色 ：
tabBarOptions: {
inactiveTintColor: 'rgba(0,0,0,0.45)',
activeTintColor: '#722ed1',
}
tab_icon.gif
统一路由风格
StackNavigator 在 Android 中的表现和 iOS 中存在一些差异，通过暴露的一些配置项我们可以统一风格，这里统一使用 iOS 的风格。
首先实现一个 HeaderBackImage 组件，统一返回图标：
const IS_IOS = Platform.OS === 'ios'
export default props => {
return (
<View style={styles.imgContainer}>
<Image
source={require('./assets/icons/icon_back.png')}
style={[styles.image, { tintColor: props.tintColor }]}
{...props}
/>
</View>
)
}
const styles = StyleSheet.create({
imgContainer: {
paddingRight: IS_IOS ? 6 : 15,
paddingLeft: IS_IOS ? 15 : 0,
},
image: {
backgroundColor: 'transparent',
height: 16,
width: 10,
resizeMode: 'contain',
},
})
修改 StackNavigator 配置：
defaultNavigationOptions: {
headerStyle: {
elevation: 0, // 移除 Android Header 阴影
shadowOpacity: 0, // 移除 iOS Header 阴影
},
headerBackImage: HeaderBackImage,
headerTitleAlign: 'center', // Android 标题居中
headerBackTitleVisible: false, // 隐藏 iOS 返回按钮标题
headerPressColorAndroid: 'transparent', // 移除 Android 点击返回按钮效果
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // 切换路由时水平动画
headerStyleInterpolator: HeaderStyleInterpolators.forUIKit, // 切换路时 Header 动画
},
headerMode: 'float', // 页面共用一个 Header，切换时应用动画
tab_a_android.gif
沉浸式状态栏
之前我写过一篇关于实现沉浸式状态栏的博客，在 4.x 版本中实现该功能变得更加方便。
纯色
首先我们给 Header 添加一个背景色看看默认是什么效果。
headerStyle: {
backgroundColor: '#722ed1',
},
headerTintColor: '#fff',
statusbar.png
可以看到 Android 端状态栏依旧是灰色。我们可以设置 StatusBar 的属性来实现沉浸式：
<>
<StatusBar backgroundColor="transparent" translucent />
<AppContainer />
</>
status_android.png
可以看到设置了 translucent 之后，内容并没有往上移动到状态，4.x 版本默认处理了这种情况。
背景图
有时页面顶部有一张背景图或者整个页面有个全屏背景，这时我们就需要 Header 透明并且内容能衍生到状态栏底部。
我们先修改 Second 页面，添加一个背景图片：
const Second = () => {
return (
<ImageBackground
style={{ flex: 1 }}
source={require('../../assets/img/bg.jpg')}>
<Text>I have a full screen background image</Text>
</ImageBackground>
)
}
WX20200113-161531.png
可以看到图片并没有撑满整个屏幕，设置 headerTransparent 属性为 true 可以使 Header 透明并浮在页面上，这样内容就会撑满。
Second.navigationOptions = {
headerTransparent: true,
}
full.png
此时虽然全屏了，但是内容却跑到 Header 底部除了，我们需要添加上边距预留出 Header 的位置，通过 useHeaderHeight 可以获取到 Header 的高度。
import { useHeaderHeight } from 'react-navigation-stack'
const headerHeight = useHeaderHeight()
full_margin.png
处理状态栏文字
RN 中切换到不同的页面，可能需要显示不能颜色的文字（深色、浅色），在之前的博客中介绍了使用高阶组件的方法，监听 navigation 的 willFocus 事件切换。4.x 版本中仍需要使用此方案，不过这次通过 hook 来实现。
// useStatusBar.js
import { useEffect } from 'react'
import { StatusBar } from 'react-native'
const useStatusBar = (navigation, barStyle) => {
useEffect(() => {
const onWillFocus = () => {
StatusBar.setBarStyle(barStyle)
}
StatusBar.setBarStyle(barStyle)
const listener = navigation.addListener('willFocus', onWillFocus)
return () => listener.remove()
}, [])
}
export default useStatusBar
当页面挂载之后设置状态栏的风格，后续当从其他页面返回时会触发 willFocus 事件。
网友评论