react-native-tag-autocomplete：如何在建议列表中添加滚动条

Question

我的建议列表太长，无法在页面上查看，因此，当页面结束时它被隐藏，我看不到所有建议，因此如何在建议列表中添加滚动条，以便用户可以向下滚动列表而且没有记录会丢失。 注意：我的页面上有多个标记自动完成功能。

render()
{
    return 
    (
        <View style={styles.container}>
            <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4', marginBottom: 7 }}>Geo Targeting</Text>
                <ScrollView keyboardShouldPersistTaps='handled' >
                    <View style={{ marginBottom: 15,  flex: 1 }}>
                        <Text style={{ fontSize: 25, color: 'blue' }}> Select Locations</Text>
                        <RadioForm
                            ref="radioForm"
                            style={styles.radioButtonStyle}
                            radio_props={this.state.radio_props}
                            initial={this.state.selectedLocation}
                            formHorizontal={true}
                            buttonColor={'#2196f3'}
                            labelStyle={{ marginRight: 20 }}
                            onPress={(value, index) => {
                                this.setState({
                                    value: value,
                                    valueIndex: index
                                })
                        }} />
                    </View>
                        {console.log("include locations: " + this.state.includesuggestions)}
                        <View style = {styles.includeLocationsContainer}> 
                            <Text style={styles.label}>
                                Type the name of a country or city to include
                            </Text>
                            <View key={1} style={styles.autocompleteContainer}>
                                <AutoTags
                                    //required
                                    suggestions={this.state.includesuggestions}
                                    tagsSelected={this.state.includeTagsSelected}
                                    handleAddition={this.includeAddition}
                                    handleDelete={this.inlcudeDelete}
                                    //optional
                                    placeholder="Add a location.."
                                    filterData={this.includeFilterData}
                                    renderSuggestion={this.includeRenderSuggestions}
                                    renderTags={this.includeRenderTags}
                                />
                            </View>
                        </View>


                    <View style = {styles.excludeLocationsContainer}> 
                        <Text style={styles.label}>
                            Type the name of a country or city to exclude
                        </Text>
                        <View key={2} style={styles.autocompleteexcludeContainer}>
                            <AutoTags
                                //required
                                suggestions={this.state.exculdeSuggestions}
                                tagsSelected={this.state.excludeTagsSelected}
                                handleAddition={this.excludeAddition}
                                handleDelete={this.exlcudeDelete}
                                //optional
                                placeholder="Add a location.."
                                filterData={this.excludeFilterData}
                                renderSuggestion={this.excludeRenderSuggestions}
                                renderTags={this.excludeRenderTags}
                            />
                        </View>
                    </View>

                    <View style={styles.messageContainer}>
                        <TouchableOpacity
                            style={styles.SubmitButtonStyle}
                            activeOpacity={.5}
                            onPress={this.onSaveLocations} >
                            <Text style={styles.TextStyle}> SAVE</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        justifyContent: 'center',
        paddingTop: (Platform.OS === 'ios') ? 20 : 30,
        padding: 5,
    },

    includeLocationsContainer: {
        marginBottom: 10,
        left: 20,
        overflow: 'visible',
        zIndex: 999,
    },

    autocompleteContainer: {
        overflow: 'visible',
        position: 'relative',
        zIndex: 999
    },

    excludeLocationsContainer: {
        marginBottom: 10,
        left: 20,
        marginTop: 15,
        overflow: 'visible',
        zIndex: 998,
    },

    autocompleteexcludeContainer: {
        marginTop: 15,
        overflow: 'visible',
        position: 'relative',
        zIndex: 999,
    },      

});

上面是我的代码和CSS。

Answer 1

这对我有用：

 <AutoTags 
    listStyle={{maxHeight:150}} 
    // other props
 />