Question

我试图通过TouchableOpacity（第二行）打开模态。我让它在一个干净的应用程序上工作，但当我基本上复制并粘贴到我当前的应用程序时它根本不打开...另一个重要的一点是，这是一个卡片组件，在react-native-deck-刷卡。这是我猜测为什么不起作用。

我的代码的顶部：

   constructor() {
    super();
    this.state = {
      modalVisible: false
    }
  }

  setModalVisible = (visible) => {
    this.setState({modalVisible: visible})
  }

我的代码的底部部分带有模态

<View style={{flex: 1, justifyContent: 'flex-end', paddingLeft: 5, paddingTop: 10}}>
                <TouchableOpacity onPress={() => { this.setModalVisible(true)}}>
                  <Icon name="more" style={{fontSize: 40}} />
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
        <View style={{padding: 5}}>
          <Text style={{fontSize: 20}}>10 miles away</Text>
        </View>
        <View style={{marginTop: 22, flex:1}}>
          <Modal
            animationType="slide"
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              alert('Modal has been closed.');
            }}>
            <View style={{marginTop: 22}}>
              <View>
                <Text>Hello World!</Text>

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

Answer 1

您需要在构造函数中绑定函数或使用箭头函数，否则this将不会指向您的组件：

setModalVisible = (visible) => {
    this.setState({modalVisible: visible})
}

Answer 2

根据您的代码，请勿使用箭头功能。如果你想要箭头功能然后绑定它，否则使用下面的功能。

1G

React-Native模式无法打开

2 个答案: