React Native FlatList 切割底部的 Text

Question

我正在尝试制作一个搜索屏幕，我有一个 FlatList 可以填充屏幕中所有未使用的 space 并且具有将填充设置为 10 的样式。我现在有硬编码数据只是为了测试当我一直向下滚动时它的样子，最后一个文本元素被切成两半......如果我删除填充它正确显示最后一个项目，但文本显示卡住到 FlatList 的边界并为每个 FlatList 项目添加填充似乎有点矫枉过正（正如有人在另一个 post 中建议的那样）。

ImportScreen.js:

const results = [
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    ' ',
    'tert ert r ert'
];

class ImportScreen extends Component{
    render(){
        return(
            <View style={styles.container}>
                <Text style={{color: 'white', marginBottom: 10}}>IMPORT SCREEN</Text>
                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
                    <TextInput 
                        style={styles.textInput}
                        placeholder='Search terms' 
                        placeholderTextColor='#757575'
                        value={this.props.captionValue} 
                        onChangeText={(value) => this.props.captionChanged(value)}
                    />
                    <TouchableOpacity style={{marginLeft: 10}}>
                        <Icon name='ios-search' color='white' size={32} />
                    </TouchableOpacity>
                </View>
                <FlatList
                    style={styles.results}
                    data={results}
                    renderItem={({item}) => <Text style={styles.resultsText}>{item}</Text>}
                    keyExtractor={(item) => item}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        flex: 1,
        backgroundColor: '#121212',
        padding: 10
    },
    textInput: {
        borderWidth: 1,
        borderRadius: 5,
        color: 'white',
        borderColor: '#303030',
        backgroundColor: '#232323',
        minWidth: 100,
        flex: 1
    },
    results: {
        width: '100%',
        flex: 1,
        backgroundColor: "#303030",
        borderRadius: 5,
        padding: 10,
        marginTop: 10
    },
    resultsText: {
        color: 'grey'
    }
});

提前谢谢大家！

Answer 1

您将 contentContainerStyles 添加到 FlatList 组件，其中样式将应用于包装所有子视图的滚动视图内容容器。

React Native FlatList 切割底部的 Text

React Native FlatList cuts Text at the bottom

react-native

react-native-text

react-native-flatlist

react-native-stylesheet