如何在 React Native 中将按钮定位在 MapView 的右下角?

Question

我正在尝试围绕flexbox进行思考，以及组件树如何与react-native-mapsMapView一起工作(以及这是否与我目前正在使用的其他组件"在其之上"的组件不同Callout。

例如，这是我MapView的渲染方法。TouchableOpacity区域(及其buttonCallout容器)目前仅用于我理解布局的实验。我正在使用 makeitopen.com 中的F8StyleSheet包装器

render() {
return (
<View style={styles.container}>
<MapView
style={{ flex: 1 }}
region={this.state.region}
showsUserLocation={true}
>
{this.renderMarkers()}
</MapView>
<Callout style={styles.searchCallout}>
<TextInput
onChangeText={searchText => this.setState({ searchText })}
onSubmitEditing={this.handleSearch.bind(this)}
style={styles.calloutSearch}
placeholder={"Search"}
value={this.state.searchText}
/>
</Callout>
<Callout style={styles.buttonCallout}>
<TouchableOpacity
style={[styles.touchable]}
onPress={() => console.log("press")}
>
<Text style={styles.touchableText}>Press Me 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.touchable]}
onPress={() => console.log("press")}
>
<Text style={styles.touchableText}>Press Me 2</Text>
</TouchableOpacity>
</Callout>
</View>
);
}
}
const styles = F8StyleSheet.create({
container: {
flex: 1
},
buttonCallout: {
flex: 1,
alignSelf: "flex-end",
justifyContent: "space-between",
backgroundColor: "transparent",
borderWidth: 0.5,
ios: { padding: 5 },
borderRadius: 20
},
touchable: {
backgroundColor: "lightblue",
padding: 10,
margin: 10
},
touchableText: {
fontSize: 24
},
searchCallout: {
flexDirection: "row",
backgroundColor: "rgba(255, 255, 255, 0.9)",
borderRadius: 10,
width: "80%",
marginLeft: "5%",
marginTop: 40
},
calloutSearch: {
borderColor: "transparent",
marginLeft: 10,
width: "90%",
marginRight: 10,
height: 40,
borderWidth: 0.0
}
});

我如何使用边距使searchCallout达到我想要的位置是有道理的，因为它位于顶部。

就像现在的代码一样，buttonCallout(里面有TouchableOpacity)呈现在右上角(明智的 -alignSelf: 'flex-end'把它放在右边的"末尾")。

。

后期更新！通过将styles.container的flexDirection更改为row，按钮标注位于alignSelf: flex-end。我在底部有按钮标注，搜索标注仍在顶部。我想Callout组件都相互叠加渲染。

所以现在我可以在styles.container上使用justifyContent将两个标注都放在中心或左侧或右侧(center, flex-start, flex-end)。如何分别证明不同项目的合理性？(justifySelf不是东西！

将两个标注包装在无样式的View组件中会导致按钮标注呈现在右上角，但搜索标注无处可寻。

将它们都包装在标注中会导致按钮呈现在左上角的右侧，并且不会再次显示搜索标注。

帮助我理解这一切！谢谢:)

Answer 1

如果您尝试将buttonCallout放置在底部，请给它一个postion:'absolute'，这样它就会停留在底部

buttonCallout: {
flex: 1,
flexDirection:'row',
position:'absolute',
bottom:10,
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: "transparent",
borderWidth: 0.5,
borderRadius: 20
},