[英]Absolute positioning causes React Native component to go off screen
One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen.我的一个 React Native 屏幕需要在屏幕底部有一个 TouchableOpacity。 I've tried setting position: "absolute"
and bottom: 0
, however, this just causes the element to be a few hundred pixels below the screen.我试过设置position: "absolute"
和bottom: 0
,但是,这只会导致元素在屏幕下方几百像素。 How can I make my TouchableOpacity be at the bottom of the screen all the time?如何让我的 TouchableOpacity 一直位于屏幕底部?
<View style={styles.mainView}>
<View style={{ position: "relative" }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
}
/>
</View>
//styles
const styles = StyleSheet.create({
mainView: {
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "white",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
We could handle this without absolute positioning using flex
alone.我们可以在没有绝对定位的情况下单独使用flex
来处理这个问题。
Add flex:1
to the parent view and to the view that wraps the sticky bottom.将flex:1
添加到父视图和包裹粘性底部的视图。 Then, add flex: 2
to the view that wraps the other content.然后,将flex: 2
添加到包装其他内容的视图中。
Here is a minimal generic component that lets you add a sticky bottom component.这是一个最小的通用组件,可让您添加粘性底部组件。
const MainScreen = ({bottom, children}) => {
return <View style={{flex: 1, backgroundColor: 'red'}}>
<View style={{flex: 2, backgroundColor: 'green'}}>
{children}
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}}>
{bottom}
</View>
</View>
}
export default function App() {
return <MainScreen bottom={
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>}>
</MainScreen>
}
The result looks as follows:结果如下所示:
However, we can use absolute
positioning as well.但是,我们也可以使用absolute
定位。 You are just missing the flex: 1
for the parent view.您只是缺少父视图的flex: 1
。
export default function App() {
return <View style={styles.mainView}>
<View style={{ position: "absolute", bottom: 0 }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>
</View>
</View>
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "red",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
backgroundColor: "yellow",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
The result is as follows:结果如下:
if you are using position
as absolute
then your view must be last view before last closed view tag如果您使用position
作为absolute
视图,那么您的视图必须是最后一个关闭视图标签之前的最后一个视图
When you have declared any view at bottom of the screen then you should be do like this当您在屏幕底部声明任何视图时,您应该这样做
import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
</View>
</SafeAreaView >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.