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

在处理程序内部，您可以调用导航功能导航到另一页或更改组件状态以使moda可见。处理程序将作为props传递到标头，并将它们添加为onPress处理程序按钮。

如何在React导航中连接React组件？

1 个答案: