首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >VirtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中--使用另一个VirtualizedList支持的容器

VirtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中--使用另一个VirtualizedList支持的容器
EN

Stack Overflow用户
提问于 2019-11-29 04:54:13
回答 3查看 16.7K关注 0票数 8

我可以使用反应-本地-谷歌-地点-自动完成包进行google自动完成文本输入。但我每次窃听地址后都会收到警告。

警告::

VirtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中--使用另一个VirtualizedList支持容器。

我应该使用的另一个VirtualizedList支持的容器是什么,为什么现在建议它不要那样使用?

我已经为此创建了一个自定义组件,下面我将在GooglePlacesInput组件的呈现中添加代码:

代码语言:javascript
运行
复制
class GooglePlacesInput extends PureComponent {
  //..... other function

  // render function
  render() {
    const { placeholder, minSearchLen, address, name, enablePoweredByContainer, currentLocation, onChangeText } = this.props;
    return (
      <GooglePlacesAutocomplete
        placeholder={placeholder}
        name={name}
        minLength={minSearchLen}
        autoFocus={false}
        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
        listViewDisplayed="false"   // true/false/undefined
        fetchDetails={true}
        getDefaultValue={() => address}
        renderDescription={row => row.description} // custom description render
        onPress={(data, details = null) => this.onPressAddress(data, details)}
        onNotFound={() => { }}
        query={{ key: GOOGLE_API_KEY }}
        currentLocation={currentLocation} // Will add a 'Current location' button at the top of the predefined places list
        currentLocationLabel="Current location"
        nearbyPlacesAPI="GooglePlacesSearch"
        textInputProps={{
          onChangeText: onChangeText,
        }}
        enablePoweredByContainer={enablePoweredByContainer}
        isRowScrollable={false}
        styles={{
          textInputContainer: {
            backgroundColor: 'rgba(0,0,0,0)',
            borderTopWidth: 0,
            borderBottomWidth: 0,
            width: '100%',
            marginBottom: 20,
          },
          textInput: {
            paddingHorizontal: 18,
            height: 40,
            color: Colors.grey,
            fontSize: 16,
          },
          predefinedPlacesDescription: {
            color: '#1faadb',
          },
        }}
      />
    );
  }
}

// default props values
GooglePlacesInput.defaultProps = {
  name: 'address',
  placeholder: 'Enter Address',
  minSearchLen: 2,
  address: '',
  enablePoweredByContainer: true,
  currentLocation: false,
  onChangeText: '',
};

export { GooglePlacesInput };

并在另一个组件中调用它,如下所示:

代码语言:javascript
运行
复制
<Content
contentContainerStyle={[flexGrow1, p10]}
>
  <View style={[alignItemsCenter, pt20, pb30]}>
    <ImageView source={Images.mapIcon} style={{ height: Base.getPixel('4.5rem'), width: Base.getPixel('4.5rem') }} />
  </View>
  <Formik
    initialValues={this.initialValues}
    onSubmit={(data) => this.onSubmitForm(data)}
    ref={el => (this.form = el)}
    validationSchema={validationSchema}
    isSubmitting={true}
    render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) => {
      return (
        <Form>
          <GooglePlacesInput
            onPress={(data, detail) => this.onPressOfAddress(data, detail)}
            address={values.address}
            name="address"
            onChangeText={(value) => setFieldValue('address', value)}
          />
          <Button onPress={() => popScreen(this.props.componentId)} block large variant="danger">CANCEL</Button>
        </Form>
      );
    }}
  />
</Content>

当我点击自动完成的时候它就来了。

请给我建议解决这个问题的办法,或者建议我一些其他的包,它比这个更好。

此警告来自此包的主文件。

EN

回答 3

Stack Overflow用户

发布于 2020-06-01 18:39:37

我在使用本机(“从回退-本机”) ScrollView和ListItem (从反应-本机-元素)时也遇到了同样的问题。用视图组件解决了它的包装:

代码语言:javascript
运行
复制
<View>
    <ScrollView>
        <View> {
            data.map((l, i) => (
                <ListItem />
            ))}
        </View>
    </ScrollView>
</View>
票数 8
EN

Stack Overflow用户

发布于 2019-12-16 05:20:57

这并不能解决问题,但如果你认为没有真正的问题,它就可以消除警告。

将其添加到文件的顶部。

代码语言:javascript
运行
复制
import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
票数 4
EN

Stack Overflow用户

发布于 2021-01-20 14:35:36

更新以忽略警告

代码语言:javascript
运行
复制
import { LogBox } from 'react-native';

LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59098956

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档