如何在 react-native 上使 textinput 背景在地图上透明

Question

如何使外部文本输入背景透明，使其看起来像在地图内部，而不是在顶部？提前致谢！

<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)',
    }
})

Answer 1

尝试将您的文本输入包装在另一个视图中并将该视图的背景设置为透明：

<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',
}

Answer 2

终于找到答案了！感谢 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',
        }
    })

如何在 react-native 上使 textinput 背景在地图上透明

How do make textinput background transparent on map on react-native

javascript

css

reactjs

react-native