Question

在我的React-Native项目中，我想在渲染内部使用Modal。我已经声明了一个如下所示的状态变量-

this.state = { 

        ModalVisibleStatus: false 
    };

为了显示模态，我已经声明了一个函数-

 ShowModalFunction(visible) {

    this.setState({ModalVisibleStatus: visible});

  }

在渲染功能中，我刚刚编写了一个在按钮按下时显示如下所示的模态-

 <Modal
          transparent={false}

          animationType={"slide"}

          visible={this.state.ModalVisibleStatus}

          onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >


  <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>


      <View style={styles.ModalInsideView}>


          {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}

          <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>

          <Button  title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } />

          {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}


      </View>

    </View>


  </Modal>

现在，事情是每当我默认启动屏幕时，模态就会保持打开状态。但是我已经将变量ModalVisibleStatus最初声明为false。

这是“我的课程”的全部代码-

HelloWorldApp.js

i

mport React, { Component } from 'react';
import {
    Text, View, ScrollView, StyleSheet, Image, TextInput, NetInfo, TouchableOpacity,
    TouchableHighlight, AsyncStorage, Modal, Alert, Button
} from 'react-native';

import { ICON_NOTE, ICON_TODO, ICON_TAG, ICON_REMINDER, ICON_URGENT, ICON_OFFICE, ICON_PERSONAL, ICON_WORK } from '../actions/ActionTypes';
import LoginScreen from '../components/LoginScreen';

export default class HelloWorldApp extends Component {

state = {

    isLoading: false,
    getValue: null,
    ModalVisibleStatus: false
}

constructor() {
    super();
    this.state = {
        title: '',
        details: '',
        timestamp: '',
        status: '',
        url: '',
        mail: '',
        phone: '',
        category: '',
        showLoader: false,
        showAlert: false,
        isNetConnected: true,
        catImage: null,
    }
};

updateImage(image, category) {
    this.setState({
        catImage: image,
        category: category
    })
}

updateValue(text, field) {
    if (field == 'title') {
        this.setState({
            title: text
        })
    }
    else if (field == 'details') {
        this.setState({
            details: text
        })
    }

}

ShowModalFunction(visible) {
    this.setState({ ModalVisibleStatus: visible });
}

// net connection starts
async componentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });
}

render() {
    console.log('#ZZZ2:', this.state.getValue);
    return (
        <View style={{ flex: 1 }}>
            <ScrollView keyboardShouldPersistTaps={'handled'}>
                <View style={styles.container}>
                    <View style={styles.inputContainerEmail}>
                        <Image style={styles.inputIcon} source={{ uri: this.state.catImage }} />
                        <TextInput style={styles.inputs}
                            placeholder="Title"
                            keyboardType="email-address"
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.updateValue(text, 'title')} />
                    </View>

                    <View style={styles.inputContainerDetails}>
                        <TextInput style={styles.inputs}
                            placeholder="Details"
                            multiline
                            underlineColorAndroid='transparent'
                            onChangeText={(text) => this.updateValue(text, 'details')} />
                    </View>
                    <ScrollView horizontal={true}>
                        <View style={{ flexDirection: 'row', flex: 1, marginTop: 10, marginBottom: 10, marginRight: 20, marginLeft: 10 }}>
                            <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', marginRight: 10 }}
                                onPress={() => { this.updateImage(ICON_NOTE, '1') }}>
                                <Image style={styles.inputIconCategory} source={{ uri: ICON_NOTE }} />
                                <Text style={{ marginLeft: 25, marginTop: 5 }}>Note</Text>
                            </TouchableOpacity>
                        </View>
                    </ScrollView>
                    <TouchableOpacity style={styles.buttonContainerRegister}
                        onPress={() => {
                            console.log("#Ctegory:" + this.state.category + "\n Token:" + this.state.getValue + "\nTitle:" + this.state.title + "\nDetails:" + this.state.details + "\Timestamp:" + this.state.timestamp)
                        }}
                    >
                        <Text>Save</Text>
                    </TouchableOpacity>
                    <Modal
                        transparent={false}
                        animationType={"slide"}
                        visible={this.state.ModalVisibleStatus}
                        onRequestClose={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} >
                        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                            <View style={styles.ModalInsideView}>
                                <Text style={styles.TextStyle}>Text Component With Some Sample Text In Modal. </Text>
                                <Button title="Click Here To Hide Modal" onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus) }} />
                                {/* Put All Your Components Here, Which You Want To Show Inside The Modal. */}
                            </View>
                        </View>
                    </Modal>
                    <Button onPress={() => { this.ShowModalFunction(true) }} title="Click Here To Show Modal" />
                </View>
            </ScrollView>
        </View>
    );
}

}

因此，我希望有一个解决方案可以使模式默认情况下处于关闭状态，并在单击按钮时将其打开。

Answer 1

那是因为它的值变得不确定。您需要在构造函数中定义所有状态。

isLoading:false,
getValue: null,
ModalVisibleStatus: false

从state={...}剪切这些var并将它们放入构造函数中的this.state内。

Answer 2

将ModalVisibleStatus: false添加到您的构造函数中，并将其从状态中删除

 constructor() {
            super();
            this.state = {
              title:'',
              details:'',
              timestamp   : '',
              status: '',
              url:'',
              mail:'',
              phone:'',
              category:'',
              showLoader:false,
              showAlert: false,
              isNetConnected: true,
              catImage: null,
              ModalVisibleStatus: false
            }
          };

Answer 3

放置ModalVisibleStatus：在此状态下为false

this.state{
ModalVisibleStatus: false}

我相信这会起作用。

Answer 4

ShowModalFunction（）{

this.setState({
    ModalVisibleStatus: !this.state.ModalVisibleStatus
});

}

为什么在React-Native中打开屏幕时默认总是打开Modal？

4 个答案: