react-native - 模态内的反应原生 Flatlist 有时不显示数据

Question

我正在尝试在 Modal 中使用 Flatlist 来获取数据。但有时（并非总是）数据根本不显示。只是空屏。我正在使用 expo 客户端进行测试。下面是我的代码。这个 render() 方法实际上是在一个自定义组件中。因此，Modal 位于自定义组件中。我不确定 Modal 是否必须在这里引起任何问题。

// sometime flatlist does not work when inside a modal
  render(){
    return (
          <View>
            { this.props.visible && this.renderChildModal()}
            { this.props.visible &&
            <Modal
                animationType="slide"
                transparent={false}
                visible={true}
                onRequestClose={() => {
                  //Alert.alert('Modal has been closed.');
                }}>
                <View>
                  <View style={this.styles.buttonContainer}>
                    <TouchableOpacity style={this.styles.button}
                      onPress={this.props.onDone}>
                      <Text style={styles.labelButton}>Done</Text>
                    </TouchableOpacity>
                  </View>
                  <FlatList
                    data={this.state.items}
                    extraData ={this.state}
                    renderItem={({ item }) => (
                        <CheckBox
                            title={item.name}
                            checked={item.checked}
                            onPress={()=>this.onSelect(item.id-1)}  
                        />
                    )}
                    keyExtractor={item => item.id.toString()}
                  />
                </View>
              </Modal>

              }          
          </View>   
    )
  }

Answer 1

莫代尔不是问题。我在屏幕中调用名为 MultiSelect 的组件，如下所示，

   <MultiSelect
      items={specialities}
      selectedItems={profile.specialities}
      onItemSelected={this.onSelectedSpecialitiesChange}
      visible={this.state.specialitiesModalVisible}
      onDone={this.specialityMultiSelectDone}
    >
    </MultiSelect>

有时专业是空的，因为它是从服务器异步检索的。

所以，我改变了我的代码如下，

{specialities.length>0 && 
 <MultiSelect
   items={specialities}
   selectedItems={profile.specialities}
   onItemSelected={this.onSelectedSpecialitiesChange}
   visible={this.state.specialitiesModalVisible}
   onDone={this.specialityMultiSelectDone}
 >
</MultiSelect> } 

这解决了这个问题。