Javascript 如何解决React Native中模态内部两个组件之间的边界问题？

在我的react原生项目inside modal中，我在视图中使用了两个按钮。但问题是——他们之间没有任何利润

这是密码

<View style={styles.container}>
    <Modal 
        animationType={"slide"} 
        transparent={false}
        visible={this.state.ModalVisibleStatus}
        onRequestClose={() => { console.log("Modal has been closed.") }}
    >
        {/*All views of Modal*/}
        {/*Animation can be slide, slide, none*/}
        <View style={styles.modal}>
            <Text style={styles.text}>Modal is open!</Text>

            <View style={styles.inputContainerEmail}>
                <Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
                <TextInput style={styles.inputs}
                    placeholder="Email Address"
                    keyboardType="email-address"
                    underlineColorAndroid='transparent'
                    onChangeText={(text) => this.updateValue(text, 'email')} />
            </View>

            <View style={{ flexDirection: 'row' }}>
                <Button style={{ marginRight: 10 }} title="Save" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />

                <Button style={{ marginLeft: 10 }} title="Close" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />
            </View>
        </View>
    </Modal>
</View>


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DCDCDC',
    },
    modal: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#aaaa',
        padding: 100
    },
    text: {
        color: '#3f2949',
        marginTop: 10
    }
)}

{console.log（“模态已关闭。”）}
>
{/*模态的所有视图*/}
{/*动画可以是幻灯片、幻灯片、无*/}
模态是开放的！
this.updateValue（文本，'email'）}/>
{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />
{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#dcdc”，
},
模态：{
弹性：1，
对齐项目：“居中”，
背景颜色：“#aaaa”，
填充：100
},
正文：{
颜色：“#3f2949”，
玛金托普：10
}
)}

在运行这些代码之后，它将获得以下输出-

---

那么，如何在这两个按钮之间添加边距呢？

React Native

按钮的功能非常有限，据我所知，它不支持样式属性。我建议您考虑使用或定制您的需求

一个可能更脏的解决方案是将两个
按钮
包装在单独的父
视图
组件中，并将
边距
属性应用于这些父
视图
组件。或者，您可以在父级
视图
组件上指定
justifyContent:“space-between”
，查看是否也能得到所需的结果。例如，多视图方法可能如下所示：

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
         <Button title="Save" onPress={() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
         }} />
    </View>
    <View style={{flex:1}} >
        <Button title="Close" onPress={() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
        }} />
    </View>
</View>


{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />
{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />

希望这有帮助
 添加
justifyContent:“空格之间”
在按钮中查看代码为

<View style={{ flex:1, flexDirection: 'row' , justifyContent:"space-between"}}>
                <Button style={{ flex:1}} title="Save" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />

                <Button style={{ flex:2 }} title="Close" onPress={() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />
            </View>


{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />
{
this.setState（{ModalVisibleStatus:！this.state.ModalVisibleStatus}）
}} />

链接以供参考
非常感谢您告知按钮的限制。我使用TouchableOpacity轻松解决了这个问题。我尝试了您提供的代码，它也可以工作：）