在模态框内反应原生 FlatList答案

【问题标题】：React Native FlatList Inside of a Modal在模态框内反应原生 FlatList
【发布时间】：2018-09-14 15:28:24
【问题描述】：

我试图将 FlatList 放在 Modal 中，但 List 只是从我给它的容器中溢出而不是滚动。我尝试添加 flex 等，但没有运气让列表保持在界限内。有什么建议吗？

Here is the Modal

const modalContainer = {
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
  };

  const innerContainer = {
alignItems: 'center',
// flex: 1,
height: 130,
backgroundColor: colors.white.white,
borderRadius: borderRadius.sm,
width: 450,
  };

  render() {
    const styles = styleMaker();

    return (
      <View>
        <Modal visible = {this.props.visible}>
          <View style={styles.overlay} />
          <View style = {styles.modalContainer}>
          <View style = {styles.innerContainer}>
            {this.props.children}
          </View>
          </View>
        </Modal>
      </View>
    );
  }

【问题讨论】：

标签： javascript react-native modal-dialog react-native-flatlist

【解决方案1】：

这对我很有用：

使用 ScrollView 和使用 onStartShouldSetResponder={(): boolean => true} 的视图包装平面列表

完整示例：

<Modal
   ....>
  <View style={{ height: 300 }}>
    <ScrollView>
      <View onStartShouldSetResponder={(): boolean => true}>
        <FlatList
         ....
          />
      </View>
    </ScrollView>
  </View>
</Modal>

【讨论】：

等等，这允许吗？我在 ScrollView 中使用 Flatlist 时收到警告：VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.。我应该忽略它吗？
我也收到了同样的警告。

【解决方案2】：

<Modal
    animationType="slide"
    transparent={false}
    visible={this.state.modalVisible}
    onRequestClose={() => this.onRequestClose()}>
    <FlatList
        data={[{ key: 'a' }, { key: 'b' }]}
        renderItem={({ item }) => <Text>{item.key}</Text>}
     />
</Modal>

您可以在下面的链接中找到一个示例

https://snipsave.com/javawebline/#/snippet/ZYgnr5nu2hHPrM8atX

【讨论】：