React native react-native-google-places-autocomplete Virtual

Question

我创建了一个表单，其中有一个名为address的字段。我在哪里实现了"react native google places autocomplete"插件。如果我不添加scrollView，它会正常工作。但我需要添加scrollView，因为我在表单中有太多的输入字段；VirtualizedList永远不应该嵌套在具有相同方向的普通ScrollViews中；。

这是我的代码：

添加js

<SafeAreaView style={{ flex: 1, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, backgroundColor: 'white' }}>
<View style={{ flex: 1 }}>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 20, marginTop: 5, marginBottom: 10, paddingHorizontal: 15, fontFamily: 'Mulish-SemiBold' }}>Add Ground</Text>
<TouchableWithoutFeedback style={styles.button} onPress={(e) => this.chooseFile()}>
<Image source={this.state.avatarSource ? this.state.avatarSource : require('./../../assets/images/default-cover.jpg')} style={{ width: '100%', height: 150 }} />
</TouchableWithoutFeedback>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Name</Text>
<TextInput
style={styles.input}
placeholder="e.g Drealit Stadium"
onChangeText={name => this.setState({ name })}
value={this.state.name}
autoCorrect={false}
/>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Address</Text>
{/*
onChangeText={address => this.setState({ address })}
value={this.state.address}
*/}
<ScrollView>
<GooglePlacesInput />
</ScrollView>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Contact Person Name</Text>
<TextInput
style={styles.input}
placeholder="e.g David Johnson"
onChangeText={organizer_name => this.setState({ organizer_name })}
value={this.state.organizer_name}
autoCorrect={false}
/>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Contact Person Number</Text>
<TextInputMask
type={'cel-phone'}
options={{
maskType: 'INTERNATIONAL',
}}
placeholder="e.g 509-962-9014"
style={styles.input}
value={this.state.organizer_number}
onChangeText={organizer_number => this.setState({ organizer_number })}
/>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Description</Text>
<TextInput
placeholder="e.g A Ground suitable for small side cricket tournament. Ideal for some fast paced cricket and lot of fun."
onChangeText={description => this.setState({ description })}
value={this.state.description}
autoCorrect={false}
multiline={true}
numberOfLines={4}
style={[styles.input, { height: 'auto', textAlignVertical: 'top' }]}
/>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Rate per hour / day</Text>
<TextInput
style={styles.input}
placeholder="e.g 3500"
keyboardType="numeric"
onChangeText={ratePerHourDay => this.setState({ ratePerHourDay })}
value={this.state.ratePerHourDay}
autoCorrect={false}
/>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.inputLabel}>Rate per hour / night</Text>
<TextInput
style={styles.input}
placeholder="e.g 4500"
keyboardType="numeric"
onChangeText={ratePerHourNight => this.setState({ ratePerHourNight })}
value={this.state.ratePerHourNight}
autoCorrect={false}
/>
</View>
<View style={{ marginHorizontal: 15, marginVertical: 10 }}>
<TouchableWithoutFeedback style={styles.button} onPress={(e) => this.manageAddGround(e)}>
<LinearGradient
colors={["#4678f6", "#4475ee", "#5053eb"]}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 0 }}
locations={[0, 0.5, 0.6]}
style={styles.appButtonContainer}
>
<Text style={styles.buttonText}>Save</Text>
</LinearGradient>
</TouchableWithoutFeedback>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>

GooglePlacesInput.js

<View style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder='e.g 640 Cross Creek Dr, Ellensburg, WA, 98926'
query={{
key: GOOGLE_PLACES_API_KEY,
language: 'en',
}}
enablePoweredByContainer={false}
onPress={(data, details = null) => {
console.log("GooglePlacesInput -> data", data)
}}
debounce={200}
styles={{
textInputContainer: {
backgroundColor: '#fff',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 40,
borderBottomWidth: 1,
color: '#000',
borderBottomColor: '#dedede'
},
predefinedPlacesDescription: {
color: '#1faadb',
},
listView: {
backgroundColor: '#fff',
borderWidth: 0.5,
borderColor: '#dedede',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.05,
shadowRadius: 10,
elevation: 4
}
}}
/>
</View>

Answer 1

您收到此警告是因为react native-google放置了自动完成渲染组件以显示结果，并且您已经封装了。

这是一个警告，而不是错误。如果它有效，你可以保持原样。

Answer 2

从react原生虚拟化视图使用ScrollView安装程序包：npm i react-native-virtualized-view导入：import { ScrollView } from "react-native-virtualized-view";并像使用名义滚动视图一样使用它：…