React native react-native-google-places-autocomplete VirtualizedLists警告

vc6uscn9  于 2023-05-01  发布在  React
关注(0)|答案(2)|浏览(167)

我创建了一个表单,其中有一个名为address的字段。在那里我实现了'react-native-google-places-autocomplete'插件。如果我不添加scrollView,它工作得很好。但是我需要添加scrollView,因为在表单中有很多输入字段。但后来我得到了一个警告“VirtualizedLists永远不应该嵌套在具有相同方向的普通ScrollViews中”。
下面是我的代码:
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>

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

chy5wohz1#

您收到此警告是因为react-native-google-places-autocomplete呈现了一个组件来显示结果,并且您已经 Package 在。
这是一个警告,不是错误。如果它对你有用,你可以让它保持原样。

wlzqhblo

wlzqhblo2#

从react-native-virtualized-view使用ScrollView安装软件包:npm i react-native-virtualized-view导入它:import { ScrollView } from "react-native-virtualized-view";并像使用nomral ScrollView一样使用它:...

相关问题