react-native
react-native 提供了一个 SafeAreaView 组件可以实现全面屏的适配，但只是针对于IOS端有效，Android端无效。为了实现两平台的统一，我又封装了一个带 Header 头部导航栏的高级版 SafeAreaView，可通过下方命令安装。
yarn add react-native-zy-safe-area-plus
有如下属性可以设置
| 属性 | 默认值 | 说明 |
|---|---|---|
| barStyle | dark-content | 状态栏颜色，light-content为白色 |
| translucent | false | 是否开启沉浸式 |
| backgroundColor | #FFFFFF | 状态栏背景色 |
| hiddenHeader | false | 是否隐藏顶部导航栏，如果需要自定义顶部导航栏可以将其隐藏 |
| headerTitle | 这里是标题 | 顶部导航标题 |
| hiddenMore | false | 是否隐藏更多按钮 |
| headerTitleStyle | {} | 顶部导航标题样式 |
| hiddenBack | false | 是否隐藏返回按钮文字 |
| backButtonUrl | require('./icons/goback.png') | 返回按钮图片 |
| moreButtonUrl | require('./icons/more.png') | 更多按钮图片 |
两个点击事件
| 事件 | 类型 | 说明 |
|---|---|---|
| onGoBackClick | function | 点击左侧返回事件 |
| onMoreClick | function | 点击右侧更多事件 |
使用示例
import React from 'react';
import {StyleSheet, ScrollView, View, Text} from 'react-native';
import SafeAreaViewPlus from 'react-native-zy-safe-area-plus';
const App: () => React$Node = () => {
return (
<>
<SafeAreaViewPlus
onGoBackClick={() => {
alert('返回');
}}>
<ScrollView style={styles.scrollView}>
<View style={{height: 1000}}>
<Text>123456</Text>
</View>
</ScrollView>
</SafeAreaViewPlus>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: '#eee',
},
});
export default App;
image.png
