模式未出现在列表项单击上答案

【问题标题】：Modal does not appear on list item click模式未出现在列表项单击上
【发布时间】：2021-10-24 04:56:59
【问题描述】：

我试图在单击列表项时显示模式。我最初将状态设置为 false，然后当单击列表项时，它将 setModalVisible 状态设置为 true，并且应该显示模式。但是，即使状态为真，通过调试检查，模态也不显示。

初始状态

this.state = {
      setModalVisible: false,
    };

渲染列表项并切换 onPress

renderItem(item) {
    return (
      <ListItem bottomDivider={true} 
      onPress={() => this.showModal(item)}>
        <View style={{flex: 1}} margin={5}>
          <Avatar margin={5} rounded source={{uri: item.logo_url}} />
          <View style={{flexDirection: 'row'}}>
            <Text margin={50}>{item.rank}</Text>
            <Text margin={50} style={styles.cryptoTitle}>
              {item.name}
            </Text>
            <Text style={styles.cryptoPrice}> {'$' + item.price} </Text>
          </View>
        </View>
      </ListItem>
    );
  }

显示模态函数

showModal(item) {
    this.setState({setModalVisible: true});
    return (
      <View>
        <Modal
          animationType="slide"
          visible={this.state.setModalVisible}
          onRequestClose={() => {
            this.setState({setModalVisible: false});
          }}>
          <Text> Modal is Visible !</Text>
        </Modal>
      </View>
    );
  }

【问题讨论】：

这不是有效的 JavaScript。你在使用像 Vue.js 这样的框架吗？请为您的框架添加标签。
@Barmar 使用本机反应，抱歉我标记了

标签： javascript react-native modal-dialog

【解决方案1】：

您没有在项目中添加Modal。在onPress 方法中返回模态不会将其添加到树中：

renderItem(item) {
    return (
    <View>
      <ListItem bottomDivider={true} 
      onPress={() => this.showModal(item)}>
        <View style={{flex: 1}} margin={5}>
          <Avatar margin={5} rounded source={{uri: item.logo_url}} />
          <View style={{flexDirection: 'row'}}>
            <Text margin={50}>{item.rank}</Text>
            <Text margin={50} style={styles.cryptoTitle}>
              {item.name}
            </Text>
            <Text style={styles.cryptoPrice}> {'$' + item.price} </Text>
          </View>
        </View>
      </ListItem>
         {this.state.setModalVisible ? <Modal // put the modal somewhere suitable
          animationType="slide"
          visible={this.state.setModalVisible}
          onRequestClose={() => {
            this.setState({setModalVisible: false});
          }}>
          <Text> Modal is Visible !</Text>
        </Modal> : null}
    </View>
    );
  }

然后showModal 简单地更新状态：

showModal(item) {
    this.setState({setModalVisible: true});
}

【讨论】：

当我尝试添加 {this.state.modalVisible ?等等...我收到这个错误：JSX 表达式必须有一个父元素。
@FrankBoccia 请检查更新后的答案，您可以将模态视图放在任何您想要的地方

【解决方案2】：

首先，传递给 onPress 的回调不会呈现您返回的 jsx。

最好的方法是更新状态并根据新状态渲染项目

showModal(item) {
    this.setState({ selectedItem : item });
}

// render the modal somewhere in the parent component

<View>
 <List
 />
 {selectedItem && (
   <Modal
     animationType="slide"
     visible={!!this.state.selectedItem}
     onRequestClose={() => this. setState({ selectedItem : null})}>
          <Text> Modal is Visible !</Text>
   </Modal>
 )}
</View>

【讨论】：