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

Question

我收到错误 VirtualizedLists should never be nested inside plain ScrollViews 当我打开我的 DropDown 并且不能 select 或滚动 DrowDown 对话框时，我大致知道问题是，有人可以告诉我原因或告诉我解决方案吗？

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

Answer 1

发生这种情况是因为 <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']);
}, [])

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

Answer 3

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

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

VirtualizedLists should never be nested inside plain ScrollViews

javascript

reactjs

react-native

native