Question

如何使外部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)',
    }
})

Answer 1

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

Answer 2

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

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

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

2 个答案: