VirtualizedLists 不应该嵌套在普通的 ScrollViews 中答案

【问题标题】：VirtualizedLists should never be nested inside plain ScrollViewsVirtualizedLists 不应该嵌套在普通的 ScrollViews 中
【发布时间】：2021-10-25 13:33:41
【问题描述】：

当我打开 DropDown 并且无法选择或滚动 DrowDown 对话框时，我收到错误 VirtualizedLists should never be nested inside plain ScrollViews，我大致知道问题出在哪里，有人可以告诉我解释或告诉我解决方案？

<ScrollView>
  {formSchema.map((field, index) => {
    const { name, label, type } = field;
    if (type === 'select') {
      return (
        <View style={styles.sropsownWrapper} key={index}>
          <Dropdown
          />
        </View>
      );
    }
    if (type === 'input') {
      return (
        <View style={styles.wrapper}>
          <Input
            name={name}
            label={label}
          />
        </View>
      );
    }
  })}
  <View
    style={{
      ...styles.controls,
      backgroundColor: '#242424',
    }}>
    <View style={styles.wrapper}>
      <Button onPress={() => ()} />
    </View>
    <View style={styles.wrapper}>
      <Button  text="Go" />
    </View>
  </View>
</ScrollView>

【问题讨论】：

你安装的是什么版本的github.com/hossein-zare/react-native-dropdown-picker？

标签： javascript reactjs react-native native

【解决方案1】：

documentation 建议添加listMode="MODAL" 或listMode="SCROLLVIEW" 以避免此问题。

【讨论】：

【解决方案2】：

一种选择是使用 FlatList 而不是 ScrollView 作为容器：

https://facebook.github.io/react-native/docs/flatlist

<FlatList
 data={formSchema}
 rederItem={(field, index) => {
  const { name, label, type } = field;
  if (type === 'select') {
    return (
      <View style={styles.sropsownWrapper} key={index}>
        <Dropdown
          name={name}
          label={label}
          list={field.list}
          placeholder={`Select please ${label}`}
          handleSelect={(value) => setFieldValue(name, value)}
        />
      </View>
    );
  }
  if (type === 'input') {
    return (
      <View style={styles.wrapper}>
        <Input
          name={name}
          label={label}
          placeholder={`Enter Data ${label}`}
          onChangeText={handleChange(name)}
          onBlur={(name) => setFieldTouched(name)}
          value={values[name]}
        />
      </View>
    );
  }
 }
}
[...]

如果它仍然抱怨，您可以使用属性 ListHeaderComponent 和 ListFooterComponent 来获得最终解决方案。

https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

（您也可以将nestedScrollEnabled={true} 添加到ScrollView，但它只适用于Android）

【讨论】：

【解决方案3】：

这是因为<ScrollView /> 嵌套在同一方向。

在您的情况下，<ScrollView /> 和 <Dropdown /> 具有相同的滚动方向。您可以查看此以获取更多信息。 https://github.com/hossein-zare/react-native-dropdown-picker/issues/56

您可以使用它来忽略此警告。

import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])

【讨论】：