标签: react-native-flatlist

我整理了一个简单的React-native应用程序来从远程服务获取数据,将其加载到FlatList中.当用户点击某个项目时,应突出显示该项目并保留选择.我相信这样一个微不足道的行动应该不难.我不确定我错过了什么.

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Image,
  TouchableOpacity,
} from 'react-native';

export default class BasicFlatList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
      selectedItem:'null',
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const {page, seed} = this.state;
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
    this.setState({loading: true});
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 …

我有（我认为是）一个简单的FlatList呈现Cards（下面的代码）的列表

问题：列表呈现，但不会滚动以完全显示列表中的最后一个元素，或滚动到列表下方的内容FlatList

我试过的：基本上所有相关的SO问题：

• 删除所有样式
• 包裹FlatList在 aView或 aScrollView或两者中
• 添加style={{flex: 1}}到FlatListor 包装器（这会导致 **ALL* 内容消失）

有任何想法吗？

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>

我有一个查询返回的条款列表.每个都是一个单词.目前我的FlatList将每个单词呈现为同一行上的一个按钮(horizo​​ntal = {true})我希望按钮像普通文本一样包装.但我绝对不想使用列功能,因为这看起来不那么自然.这对FlatList来说可能是一个糟糕的用例吗？我还可以使用其他任何组件吗？

const styles = StyleSheet.create({
  flatlist: {
    flexWrap: 'wrap'
  },
  content: {
    alignItems: 'flex-start'
  }})

render() {

    return (
      <Content>
        <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
          <Item>
            <Icon name="ios-search" />
            <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/>
            <Icon name="ios-people" />

            <Button transparent onPress={this._executeSearch}>
            <Text>Search</Text>
          </Button>
          </Item>
        </Header>

        <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
            horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                  <Button>
                    <Text>{item.key}</Text>
                  </Button>

              }>
        </FlatList>
      </Content>

    );
  }

我得到的其中一条错误信息是:

警告:flexWrap:components``不支持wrap`` ,而是VirtualizedList使用numColumnswith FlatList.

我的文本中发生了一个有趣的错误.出于某种原因,文本被随机切断,如下所示:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: "#ecf0f1",
    width:"100%",
    paddingTop:"5%"
  },
  itemContainer: {
    backgroundColor:"#fff",
    margin:"5%",
    marginTop: 0,
    borderRadius:5,
    width: "90%"
  },
  itemHeaderContainer: {
    padding:15,
    borderColor: "#E4E2E9",
    borderBottomWidth: 1
  },
  itemHeaderText: {
    height:'auto',
    color:"#333",
    fontSize: 23,
    fontWeight: "800",
  },
  itemButtonContainer: {padding:13, flexWrap: 'wrap',  alignItems: 'flex-start', flexDirection:'row'},
  itemButtonText: { fontSize:19, color:"#fff", fontWeight:"800" },
  itemCreateButton: { backgroundColor:"#3F61E7", borderRadius: 5, paddingVertical:10, paddingHorizontal:15},
});

renderTemplate() {
  if(this.state.loaded) {
    return (
      <View style={{width:"100%"}}>

      <View style={styles.itemContainer}>
        <View style={[styles.itemHeaderContainer, {borderBottomWidth: 0}]}> …

非常奇怪的行为,我正在使用它FlatList,并且在它上面有2个浮动按钮(TouchableOpacity)(绝对位置),当它们被按下时,它们的背景颜色变成黑色.这只发生在IOS上.

码:

给予

let content = (
  <CollapsableNavList
    onListScroll={this.showOrHideFilterButtons}
    showFilterButtonsOnScroll={this.showOrHideFilterButtons}
    style={styles.list}
    isHorizontal={false}
    dataModel={this.props.isFetching ? this.props.whileFetchingDisplayedResults : this.props.dataModel}
    isFetching={false}
    onRowSelect={this._onRowSelect}
    didScrollWithOffset={this.didScrollWithOffset}
    renderRowContent={this.renderRowContent}
    keyExtractor={(item) => {
      if (this.props.isFetching) {
        return item
      }
      const property = item
      return property.propertyId
    }}
  >
    {header}
  </CollapsableNavList>
)

return (
  <View style={[styles.container, styles.relative]}>
    <View style={styles.filterBtnBlock}>
      <AdditionalSearchParamsButton

        title='Map'
        iconName='map'
        onPress={this.onMapPress}
      />
    </View>
    {content}
  </View>
)


export default class AdditionalSearchParamsButton extends Component {
  // Prop type warnings
  static propTypes = {
    iconName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired, …

我有一个自动完成框,它给我一个自动完成项列表.我在FlatList中显示项目,我在FlatList周围也有一个边框.我的代码如下: -

render(){
return (
  <View>
    <TextInput
       clearButtonMode="while-editing"
       onChangeText={this.onChangeText}
       value={this.state.searchText}
       onSubmitEditing={this.onTextSubmitted}
       placeholder="Find..." />
       {this.state.data.length > 0 &&
        <FlatList
           style={styles.list}
           keyboardShouldPersistTaps="handled"
           data={this.state.data}
           ItemSeparatorComponent={this.renderSeparator}
           keyExtractor={item => item.properties.id}
           renderItem={this.renderItem} />});
}

const styles = StyleSheet.create({
list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
  },
});

如何使用列表项的数量增加/减少FlatList的大小(我认为边框是此错误背后的原因).

我想改变宽度和高度<FlatList />.

我将height样式设置为当前<FlatList />但它从未起作用.

我<FlatList />绝不能改变高度.

这是我的render()功能和风格.

    render() {
        const listData = [];
        listData.push({ key: 0 });
        listData.push({ key: 1 });
        listData.push({ key: 2 });
        listData.push({ key: 3 });
        listData.push({ key: 4 });
        return (
            <View style={styles.container}>
                <FlatList
                    data={listData}
                    renderItem={({item}) => {
                        return (
                            <View
                                style={{
                                    width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
                                }}
                            />
                        )
                    }}
                    horizontal
                    style={styles.flatList}
                />
            </View>
        );
    }

const styles = StyleSheet.create({
    container: { …

我有一个包含多列的FlatList:

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

和一个行分隔符:

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

但是分隔符只出现在行之间,而不是出现在列之间(即使我添加了 width: 0.5

在世博会上查看

如何添加点击监听器Flatlist？

我的代码:

renderItem({item, index}){
    return <View style = {{
    flex:1,
    margin: 5, 
    minWidth: 170, 
    maxWidth: 223,
    height: 304,
    maxHeight: 304,
    backgroundColor: '#ccc',
    }}/>
}
render(){
return(<FlatList
contentContainerStyle={styles.list}
data={[{key: 'a'}, {key: 'b'},{key:'c'}]}
renderItem={this.renderItem}
/>);
}
}

更新1:我使用了按钮,但它没有工作Flatlist.但是只使用按钮代替Flatlist,它可以工作.为什么它在FlatlistrenderItem 中不起作用？

_listener = () => {
    alert("clicked");
}

renderItem({item, index}){
    return<View>
      <Button
          title = "Button"
          color = "#ccc"
          onPress={this._listener}
      />
    </View>
}

为什么我们在flatlist中使用getItemLayout,它如何帮助提高flatlist的性能.检查react-native文档,但没有找到令人满意的答案.

  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

什么是抵消在这里,它做什么？