模态不出现在列表项点击

Question

我试图在单击列表项时显示模式。我最初将状态设置为 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>
    );
  }

Answer 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});
}

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

模态不出现在列表项点击

Modal does not appear on list item click

javascript

modal-dialog

react-native