正如你在下面的图片中看到的,我必须给予一些顶部边距,以“不”隐藏我的导航标题下的一半内容,是不是标题应该是一个“安全区”下面的内容,为了安全起见,我提供了SafeAreaView
,但我的内容仍然在标题下,不幸的是,我必须给一些硬编码的边距顶部值,以避免隐藏。
上图是我评论marginTop
时的图像。
上图是当我添加marginTop: 70
时
验证码:NotificationScreen.tsx
:
import {
View,
SafeAreaView,
Text,
StatusBar,
} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import OrderItem from '../../components/OrderItem';
const NotificationScreen = () => {
const [orders, setOrders] = useState([]);
useEffect(() => {
// calling API...
}, []);
return (
<SafeAreaView style={styles.container}>
<StatusBar backgroundColor="transparent" translucent />
<Text style={{color: 'lightgray', fontSize: 18}}>My Orders: </Text>
<Animated.FlatList
data={orders}
entering={FadeIn}
leaving={FadeOut}
contentContainerStyle={{
alignItems: 'center',
}}
keyExtractor={(_: any, index) => 'key' + index}
renderItem={({item}) => <OrderItem key={item.id} data={item} />}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
marginTop: 70, // if I remove this, the content goes under the header as shown in image.
flex: 1,
padding: 10,
backgroundColor: COLORS.primary,
},
});
export default NotificationScreen;
还有一个问题,为什么我的OrderItem
没有采用FlatList
的全宽(见图,灰色框没有采用全宽...),我已经将width: 100%
提供给了我的OrderItem
容器:OrderItem.tsx
:
const OrderItem = ({data}) => {
return (
<View style={styles.container}>
<View style={styles.textBlock}>
<Text style={styles.label}>Strategy: </Text>
<Text style={styles.info}>{data.strategyTitle}</Text>
</View>
// ... same views as shown in image
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
paddingVertical: 10,
paddingHorizontal: 10,
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: COLORS.lightGray,
borderRadius: 10,
},
textBlock: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
label: {
color: 'grey',
fontSize: 16,
},
info: {
color: 'white',
fontSize: 16,
},
});
export default OrderItem;
1条答案
按热度按时间wwwo4jvm1#
SafeAreaView
目前不适用于Android设备。您需要设置动态paddingTop
以避免此问题:对于
OrderItem
没有占用所有可用的宽度,从Animated.FlatList
中删除以下内容: