如何在MapView的右下角放置一个按钮以响应本机？
我正试图将我的头脑集中在柔性盒上，以及组件树是如何与react-native-maps MapView一起工作的(以及这与其他组件“在它们之上”的不同之处，我目前正在使用Callout。
例如，这是我的MapView的呈现方法。TouchableOpacity区域(和它的buttonCallout容器。)目前只是用于我理解布局的实验。
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'将其放在右侧的"end“)。
..。
中后更新！通过将styles.container的flexDirection改为row，按钮标注在alignSelf: flex-end。我在底部有按钮标注，搜索标注仍然在顶部。我想Callout组件都是在彼此之上呈现的。
因此，现在我可以使用justifyContent on styles.container，在中间或者左边或右边(center, flex-start, flex-end)都有两个标注。我如何证明不同的项目是分开的？(justifySelf不是一件事！)
将这两个标注都封装在一个不带样式的View组件中，结果显示在右上角的按钮标注，但是搜索标注却找不到。
在左上角的右上角的按钮中，将它们都封装在标注结果中，搜索标注再次没有显示。
帮我理解这一切！谢谢:)
回答 1
Stack Overflow用户
发布于 2019-04-01 04:11:52
如果你试图将buttonCallout定位在底部，给它一个postion:'absolute'，这样它就会保持在底部
buttonCallout: {
flex: 1,
flexDirection:'row',
position:'absolute',
bottom:10,
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: "transparent",
borderWidth: 0.5,
borderRadius: 20
},https://stackoverflow.com/questions/55446488
复制相似问题
腾讯云开发者
