React native React native React native google places自动完成虚拟化列表警告

我创建了一个表单，其中有一个名为address的字段。我在那里实现了“react native google places autocomplete”插件。如果我不添加scrollView，它可以正常工作。但我需要添加scrollView，因为表单中有太多输入字段。但后来我得到了一个警告：“VirtualizedList不应该嵌套在相同方向的纯滚动视图中”

这是我的密码：

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

添油加醋
this.chooseFile（）}>
名称
this.setState（{name}）}
值={this.state.name}
自动更正={false}
/>
地址
{/*
onChangeText={address=>this.setState（{address}）}
值={this.state.address}
*/}
联系人姓名
this.setState（{organizer_name}）}
值={this.state.organizer\u name}
自动更正={false}
/>
联系人号码
this.setState（{organizer_number}）}
/>
描述
this.setState（{description}）}
值={this.state.description}
自动更正={false}
多行={true}
numberOfLines={4}
style={[styles.input，{height:'auto'，textAlignVertical:'top'}]}
/>
每小时/天的费率
this.setState（{ratePerHourDay}）
值={this.state.ratePerHourDay}
自动更正={false}
/>
每小时/夜费率
this.setState（{ratePerHourNight}）
值={this.state.ratePerHourNight}
自动更正={false}
/>
这个.manageAddGround（e）}>
拯救

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>

{
log（“GooglePlacesInput->data”，data）
}}
去盎司={200}
风格={{
textInputContainer：{
背景颜色：“#fff”，
borderTopWidth:0，
边框底部宽度：0，
},
文本输入：{
marginLeft:0，
marginRight:0，
身高：40，
边界宽度：1，
颜色：“#000”，
borderBottomColor:“#dedede”
},
预定义位置说明：{
颜色：“#1faadb”，
},
列表视图：{
背景颜色：“#fff”，
边框宽度：0.5，
边框颜色：“#dedede”，
阴影颜色：“#000”，
阴影偏移：{
宽度：0，
身高：6，
},
阴影不透明度：0.05，
阴影半径：10，
标高：4
}
}}
/>

您收到此警告是因为react native google places autocomplete会呈现一个组件以显示结果，并且您已包装在一个文件中

---

这是警告，不是错误。如果它对您有效，您可以保持原样。

您将收到此警告，因为react native google places autocomplete会呈现一个组件以显示结果，并且您已包装在一个文件中

---

这是警告，不是错误。如果它对您有效，您可以让它保持原样。

它没有警告功能。无法选择任何内容。它不适用于警告。无法选择任何内容。