javascript 如何在 react-native 上的地图上使 textinput 背景透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32597924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do make textinput background transparent on map on react-native
提问by phongyewtong
How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!
如何使外部 textinput 背景透明，使其看起来像地图内部，而不是顶部？提前致谢！
<View style={styles.container}>
<TextInput style={styles.input}/>
<MapView style={styles.map}/>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
input: {
height: 36,
padding: 10,
margin: 18,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'rgba(0,0,0,0)',
}
})
回答by phongyewtong
Finally got it answer! Thanks to jpea!
终于有答案了！感谢 jpea！
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputView}>
<TextInput style={styles.input}/>
</View>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
inputView: {
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 36,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'white',
}
})
回答by jpea
Try wrapping your text input in another view and setting that view's background to transparent:
尝试将您的文本输入包装在另一个视图中并将该视图的背景设置为透明：
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputWrapper}>
<TextInput style={styles.inputSearch}/>
</View>
</View>
inputWrapper: {
flex: 1,
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
},
inputSearch: {
backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
color: 'white',
}
