Блог

В моем проекте React-Native я хочу использовать модальный внутри рендеринга. Я объявил одну переменную состояния, как показано ниже-

 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>
    );
}
  

}

Итак, я хочу, чтобы решение закрывало модальный режим по умолчанию и открывало его при нажатии кнопки.

Это потому, что его значение становится неопределенным. Вам нужно определить все состояния в конструкторе.

 isLoading:false,
getValue: null,
ModalVisibleStatus: false 
  

вырежьте эти переменные из state={...} и поместите их this.state в конструктор in .

Добавьте ModalVisibleStatus: false в свой конструктор и вырежьте его из состояния

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

поместите ModalVisibleStatus: false в this.state следующим образом

 this.state{
ModalVisibleStatus: false}
  

Я считаю, что это сработает.

ShowModalFunction() {

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

}