Question

我试图制作一个搜索屏幕，我有一个FlatList可以填充屏幕上所有未使用的空间，并具有将填充设置为10的样式。我现在已经对数据进行了硬编码，只是为了测试当我向下滚动时的样子，最后一个文本元素被切成两半……如果我删除填充，它会正确显示最后一个项目，但文本显示粘滞放在FlatList的边框上，并在FlatList的每个项目上添加填充似乎有点过头了（正如另一篇文章中所建议的那样）。

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组件中，其中样式将应用于包装所有子视图的滚动视图内容容器。

Answer 2

这将解决您的问题

export default class App extends React.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 }} />
        </View>
        <View style={styles.resultsContainer}>
          <FlatList
            style={styles.results}
            data={results}
            renderItem={({ item }) => <Text style={styles.resultsText}>{item}</Text>}
            keyExtractor={item => item}
          />
        </View>
      </View>
    )
  }
}

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

React Native FlatList在底部削减文本

2 个答案: