如何在反应导航中连接反应组件？

Question

我在 react native 中创建了模态。我现在在右上角添加了过滤器选项图标，当用户点击它应该打开模式。我怎样才能做到这一点 ？我在 navigation.js 中添加了选项图标，但现在如何将它与模态组件连接？

setModalVisible 下面的代码在 filteroptions.js 中可用，而在 navigation.js 中不可用

代码：

navigation.js：

Updates: {
            screen: UpdatesScreen,

            navigationOptions: ({ navigation }) => ({
                headerTitle: 'Myapp',
                headerRight:<TouchableOpacity onPress={() => {this.setModalVisible(true);}}>
                                <MenuIcon style={{paddingLeft: 10, paddingRight: 15}} name="md-options" size={25} color="white"/>
                            </TouchableOpacity>,

            })
        }, 

filteroptions.js：

import React, {Component} from 'react';
import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

export default class FilteroptionsModel extends Component {
  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

当用户点击右上角的过滤器按钮时（见截图），他应该能够在屏幕上看到框模式：

Answer 1

由于它是一种模式，您不一定需要将其添加到导航中。您可以将其包含在您的页面中并最初使其不可见，然后当用户单击您的按钮时，您可以使模式可见。但是，如果您想将它添加到导航中，为什么不像任何其他组件一样添加。但是，当您导航到组件时，将其添加到导航将带您到另一个页面。当然，您可以添加一个嵌套导航器来解决这个问题，但我认为这会增加不必要的复杂性。

更新 您将首先声明一个Header 组件。

export default class MyHeader extends React.PureComponent {

  render() {
    <View>
      <View>...Your left Icon here</View>
      <View>...Your Title here</View>
      <View>...Your right Icon Here</View>
    </View>
  }
}

然后在您的页面中，您将首先渲染此组件，将您的处理程序作为道具传递，然后渲染页面的其余部分。

export default class MyPage extends React.PureComponent {

  yourRigthHandler = () => {
     this.setState({modaVisible: true});
  }

  yourLeftHandler = () => {....}

  render() {
    <View>
      <MyHeader 
         LeftHandler={yourLeftHandler}
         LeftHandler={yourRigthHandler}>
           ....
      </MyHeader>
    </View>
  }
}

在处理程序中，您可以调用导航函数导航到另一个页面或更改组件状态以使模式可见。处理程序将作为道具传递给您的标题，您将它们作为onPress 处理程序添加到您的按钮。