Функция триггера на другом экране в React Native

Question

Я пытался установить для видимости моего модального окна в NotificationsModal значение true, нажав на значок уведомлений в классе Nav.

class Nav extends Component {
    constructor(){
      super()
      this.state={
        show: false,
      } 
    }

    showNotifications(){
      this.setState({
        show: true
      })
    }

    render() { 
        const logo = '../../../assets/logo2.png';
        return ( 
            <View style={styles.top}>
              <NotificationsModal visible={this.state.show}/>
                <View style={styles.emptyLeft}>
                </View>
                <View style={styles.logo}>
                  <Image source= {require(logo)} style={{ width: 100, height: 60, marginTop: 20,}} />
                </View>
                <View style={styles.icon}>
                <TouchableOpacity onPress={() => this.showNotifications()}>
                  <Bell name="bell" size={30} color="white" />
                </TouchableOpacity>
                </View>
            </View>
         );
    }}export default Nav;

А вот класс, который содержит модальный

    class NotificationsModal extends Component {
    constructor(){
        super()
        this.state={
            modalVisible: false,
        }
        this.modalVisibility = this.modalVisibility.bind(this)
    }

    modalVisibility(visible) {
        this.setState({
            modalVisible: visible
        })
    }

    render() { 
        return ( 
            <Modal transparent={true} animationType="fade" visible={this.state.modalVisible}>
                <View style={{flex: 1, alignItems: 'center',backgroundColor: "#7b7b7aaa",}}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  
                        onPress={() => this.modalVisibility(false)}>
                        <View style={styles.TriangleShapeView}/>
                        <View style={styles.modal}>
                            <ScrollView>
                                <TouchableWithoutFeedback>
                                    <View style={styles.notificationsBox}>
                                        <Text>Hi</Text>
                                        <Text>Hi</Text>
                                        <Text>Hi</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </ScrollView>
                        </View>
                    </TouchableOpacity>
                </View>
            </Modal>
         );
    }}export default NotificationsModal;

Я не могу установить видимую опору в модальном компоненте на this.props.show, потому что TouchableOpacity на NotificationsModal класс имеет возможность управлять состоянием. Так что технически единственное решение - вызвать функцию modalVisibilty при нажатии значка в классе Nav. однако я не знаю, как это сделать.

Надеюсь, это имеет смысл!

Answer 1

Вы можете превратить NotificationsModal в презентационный компонент и переместить его состояние в Nav компонент.

class Nav extends Component {
    constructor(){
      super()
      this.state = {
        show: false,
        modalVisible: false,
      }

      this.modalVisibility = this.modalVisibility.bind(this)
    }

    modalVisibility(visible) {
      this.setState(state => ({
        ...state,
        modalVisible: visible
      }))
    }

    showNotifications() {
      this.setState(state => ({
         ...state,
         show: true
      })
    }

    render() { 
        const logo = '../../../assets/logo2.png';
        return ( 
            <View style={styles.top}>
              <NotificationsModal modalVisible={modalVisible} modalVisibility={this.modalVisibility} visible={this.state.show}/>
                <View style={styles.emptyLeft}>
                </View>
                <View style={styles.logo}>
                  <Image source= {require(logo)} style={{ width: 100, height: 60, marginTop: 20,}} />
                </View>
                <View style={styles.icon}>
                <TouchableOpacity onPress={() => this.showNotifications()}>
                  <Bell name="bell" size={30} color="white" />
                </TouchableOpacity>
                </View>
            </View>
         );
    }}

export default Nav;

render() { 
        return ( 
            <Modal transparent={true} animationType="fade" visible={this.props.modalVisible}>
                <View style={{flex: 1, alignItems: 'center',backgroundColor: "#7b7b7aaa",}}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  
                        onPress={() => this.props.modalVisibility(false)}>
                        <View style={styles.TriangleShapeView}/>
                        <View style={styles.modal}>
                            <ScrollView>
                                <TouchableWithoutFeedback>
                                    <View style={styles.notificationsBox}>
                                        <Text>Hi</Text>
                                        <Text>Hi</Text>
                                        <Text>Hi</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                            </ScrollView>
                        </View>
                    </TouchableOpacity>
                </View>
            </Modal>
         );