我想在屏幕的右下角有一个固定的按钮，但是它会根据列表中映射/呈现的项目而移动。如果jobs列表中有很多物品，那么它将移到底部，但如果jobs列表中只有一个物品，那么按钮将显示在顶部:
return (
<View>
<View style={generalStyles.container}> //container only has margin styling (not important)
{jobs.map((job, i) => (
<TouchableOpacity style={generalStyles.jobListItem} index={i} key={i} onPress={() => console.log(job + 'got clicked uwu')}>
<Text style={generalStyles.jobListItemText}>
{job}
</Text>
<IconButton style={generalStyles.jobListItemIcon} icon={props => <MaterialIcon name="add-box" {...props} size={70} />} color={colors[3]} />
</TouchableOpacity>
))
}
</View>
<View> //Button moves depending on how many jobs there are
<IconButton
onPress={() => console.log('route to add new job screen')}
style={generalStyles.homeAddJobButton}
icon={props => <IonIcon name='add-circle-sharp' {...props} size={100} color={colors[5]} />}
/>
</View>
</View>
);
样式如下:
jobListItem: {
backgroundColor: colors[1],
padding: 30,
marginVertical: 2,
borderRadius: 7,
alignItems: 'center',
flexDirection: 'row'
},
homeAddJobButton: {
height: 100,
width: 100,
borderRadius: 999,
position:'absolute',
alignSelf:'flex-end',
bottom: 50
},
如果我注释除<IconButton/>以外的所有内容，那么它处于正确的位置，但是当我添加其他组件时，它开始定位不正确。有人知道为什么它的位置不固定吗?
我试过了:
<View style={generalStyles.container}> //positions: relative
{jobs.map((job, i) => (
<TouchableOpacity style={generalStyles.jobListItem} index={i} key={i} onPress={() => console.log(job + 'got clicked uwu')}>
<Text style={generalStyles.jobListItemText}>
{job}
</Text>
<IconButton style={generalStyles.jobListItemIcon} icon={props => <MaterialIcon name="add-box" {...props} size={70} />} color={colors[3]} />
</TouchableOpacity>
))}
<IconButton //position: absolute, still gets moved by other child element
onPress={() => console.log('route to add new job screen')}
style={generalStyles.homeAddJobButton}
icon={props => <IonIcon name='add-circle-sharp' {...props} size={100} color={colors[5]} />}
/>
</View>
绝对定位元素需要有一个位置相对的父元素。相对定位属性将该对象设置为绝对定位元素的参考框架。
你可以使body位置相对，这将允许你的按钮停留在你想要的地方。但是，如果按钮有一个相对定位的祖先而不是主体，则按钮将受到该元素而不是主体的影响。这就是为什么按钮会移动。
确保按钮停留在您想要的位置的一种方法是使其成为body元素的直接子元素。否则，你需要确保除了body之外，所有的父按钮都不是相对定位的。
body {
position: relative;
/* ... */
}
.your-button {
position: absolute;
/* ... */
}
<body>
<div>Your content</div>
<div class='your-button'></div>
</body>