react-native
react-native 提供了一個 SafeAreaView 組件可以實(shí)現(xiàn)全面屏的適配怀浆，但只是針對于IOS端有效孽惰，Android端無效识樱。為了實(shí)現(xiàn)兩平臺的統(tǒng)一火的，我又封裝了一個帶 Header 頭部導(dǎo)航欄的高級版 SafeAreaView赠法，可通過下方命令安裝麦轰。
yarn add react-native-zy-safe-area-plus
有如下屬性可以設(shè)置
| 屬性 | 默認(rèn)值 | 說明 |
|---|---|---|
| barStyle | dark-content | 狀態(tài)欄顏色乔夯，light-content為白色 |
| translucent | false | 是否開啟沉浸式 |
| backgroundColor | #FFFFFF | 狀態(tài)欄背景色 |
| hiddenHeader | false | 是否隱藏頂部導(dǎo)航欄，如果需要自定義頂部導(dǎo)航欄可以將其隱藏 |
| headerTitle | 這里是標(biāo)題 | 頂部導(dǎo)航標(biāo)題 |
| hiddenMore | false | 是否隱藏更多按鈕 |
| headerTitleStyle | {} | 頂部導(dǎo)航標(biāo)題樣式 |
| hiddenBack | false | 是否隱藏返回按鈕文字 |
| backButtonUrl | require('./icons/goback.png') | 返回按鈕圖片 |
| moreButtonUrl | require('./icons/more.png') | 更多按鈕圖片 |
兩個點(diǎn)擊事件
| 事件 | 類型 | 說明 |
|---|---|---|
| onGoBackClick | function | 點(diǎn)擊左側(cè)返回事件 |
| onMoreClick | function | 點(diǎn)擊右側(cè)更多事件 |
使用示例
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
