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

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

var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#F5FCFF”，
},
地图：{
弹性：1，
},
输入：{
身高：36，
填充：10，
差额：18，
尺码：18，
边框宽度：1，
边界半径：10，
边框颜色：“#48BBEC”，
背景颜色：“rgba（0,0,0,0）”，
}
})

---

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

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

输入包装器：{
弹性：1，
背景色：“透明”，
位置：'绝对'，
排名：0，
},
输入搜索：{
背景色：“rgba（0,0,0,0.4）”，//40%不透明
颜色：'白色'，
}

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

var styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#F5FCFF”，
},
地图：{
弹性：1，
},
输入视图：{
背景颜色：“rgba（0,0,0,0）”，
位置：'绝对'，
排名：0，
左:5,，
右：5
},
输入：{
身高：36，
填充：10，
玛金托普：20，
边缘左：10，
marginRight:10，
尺码：18，
边框宽度：1，
边界半径：10，
边框颜色：“#48BBEC”，
背景颜色：“白色”，
}
})

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