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

【问题标题】：How do make textinput background transparent on map on react-native如何在 react-native 的地图上使 textinput 背景透明
【发布时间】：2015-12-12 09:50:20
【问题描述】：

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

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

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案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',
}

【讨论】：

它不起作用。内部背景改变不透明度。需要的是外部bg，但谢谢哈哈
已编辑。我在一个项目上做同样的事情，这就是我的方法。

【解决方案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',
        }
    })

【讨论】：