我可以使用反应-本地-谷歌-地点-自动完成包进行google自动完成文本输入。但我每次窃听地址后都会收到警告。
警告::
VirtualizedLists不应该嵌套在具有相同方向的普通ScrollViews中--使用另一个VirtualizedList支持容器。
我应该使用的另一个VirtualizedList支持的容器是什么,为什么现在建议它不要那样使用?
我已经为此创建了一个自定义组件,下面我将在GooglePlacesInput组件的呈现中添加代码:
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 };
并在另一个组件中调用它,如下所示:
<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>
当我点击自动完成的时候它就来了。
请给我建议解决这个问题的办法,或者建议我一些其他的包,它比这个更好。
此警告来自此包的主文件。
发布于 2020-06-01 18:39:37
我在使用本机(“从回退-本机”) ScrollView和ListItem (从反应-本机-元素)时也遇到了同样的问题。用视图组件解决了它的包装:
<View>
<ScrollView>
<View> {
data.map((l, i) => (
<ListItem />
))}
</View>
</ScrollView>
</View>
发布于 2019-12-16 05:20:57
这并不能解决问题,但如果你认为没有真正的问题,它就可以消除警告。
将其添加到文件的顶部。
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
发布于 2021-01-20 14:35:36
更新以忽略警告
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.']);
https://stackoverflow.com/questions/59098956
复制相似问题