React-Native全面屏适配

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