标签: react-native-flatlist

我有一个水平的 FlatList，每次到达末尾时，它都会自动将新元素添加到列表中，因此它有点像一个无限列表。我希望应用程序自己自动滚动列表，而用户仍然必须能够来回滚动。这就是我要走的路

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

    this.scrollX = 0;
    this.offset = new Animated.Value(0);
    this.scrollTo = this.scrollTo.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.stopAnimation = this.stopAnimation.bind(this);
    // Listener to call the scrollToOffset function
    this.offset.addListener(this.scrollTo);
  }

  _scroller() {
    toValue = this.scrollX + 10; // Scroll 10 pixels in each loop
    this.animation = Animated.timing(
      this.offset,
      {
        toValue: toValue,
        duration: 1000, // A loop takes a second
        easing: Easing.linear,
      }
    );
    this.animation.start(() => this._scroller()); //Repeats itself when done
  }

  scrollTo(e) { …

我正在尝试为一个嵌套在React Native FlatList中的图像连接一个印刷处理程序.我已经验证了函数是通过props传递的,通过直接在我的组件中调用函数,并且工作正常.下面是一个简化的测试用例.我也尝试在图像上设置onPress,结果相同.

const PostList = ({posts, onActLike, currentUser}) => {
  return (
    <FlatList
      data={ posts }
      keyExtractor={ (item) => item.id }
      renderItem={ ({item}) => {
        return (
          <View>
            <Image
              source={ {uri: item.media.url} }
              resizeMode="cover"
            />
            <View>
              <View
                onPress={ (item) => {
                  onActLike(item);
                } }
              >
                {
                  currentUser.likedMedia.indexOf(item.id) > -1 &&
                    <Image
                      source={ require('../assets/images/like_filled.png') }
                      style={ {width: 20, height: 17} }
                      resizeMode='contain'
                    />
                }
                {
                  currentUser.likedMedia.indexOf(item.id) === -1 &&
                    <Image
                      source={ require('../assets/images/like_unfilled.png') }
                      style={ {width: 20, height: 17} }
                      resizeMode='contain' …

我只想在一个FlatList. 稍后当我单击文本时，将呈现新项目。

这是示例代码：

export default class FlatListBasics extends Component {
renderNewItem = () => {
// do something here
}
      render() {
        return (
          <View style={styles.container}>
            <FlatList
              data={[
                {key: 'Devin'},
                {key: 'Jackson'},
                {key: 'James'},
                {key: 'Joel'},
                {key: 'John'},
                {key: 'Jillian'},
                {key: 'Jimmy'},
                {key: 'Julie'},
              ]}
              renderItem={({item}) => <Text onPress={this.renderNewItem}>{item.key}</Text>}
            />
          </View>
        );
      }

那么我如何才能做到这一点？}

我正在尝试制作一个搜索屏幕，我有一个 FlatList 填充屏幕中所有未使用的空间，并具有将填充设置为 10 的样式。我现在有硬编码数据只是为了测试它在什么时候看起来像我一直向下滚动，最后一个文本元素被切成两半......如果我删除填充它会正确显示最后一个项目，但文本显示粘在 FlatList 的边框上，并向每个 FlatList 项目添加填充看起来像矫枉过正（正如有人在另一篇文章中建议的那样）。

导入屏幕.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 …

我正在开发本机应用程序。在那，我们展示了一些关于Text 的描述，它可能是行数。

所以，如果数据超过 3 行，如果它被扩展，我必须显示更多和更少。

        <FlatList
          style={styles.faltList}
          showsVerticalScrollIndicator
          data={data}
          extraData={this.state}
          renderItem={({ item, index }) => (
            <View style={styles.flatListCell}>
                <Text style={styles.description}>{item.description}</Text>
              </View>
            </View>
          )
          }
          ItemSeparatorComponent={() => (
            <View style={{ height: 10}} />
          )}
        />

我找到了react-native-view-more-text库，但我想通过自定义代码来实现它。

注意：我在 Flatlist 中显示该文本。

有什么建议？

我正在尝试在 React Native 中检索 FlatList 上单击元素的索引。正如文档所说，我将索引传递给 renderItem 道具。我的代码如下：

/**
 * Goes to the show view of a container
 * @param {*} index 
 */
showContainer = (index) => {
    console.log(index); 
}

render() {
    return (
        <DefaultScrollView style={styles.container}>
            <FlatList
                data={this.props.containers}
                renderItem={(data, index) => (
                    <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name} …

我正在尝试获取在以下端点描述的对象：https : //api.cosmicjs.com/v1/67302ce0-7681-11e9-8193-4bd8888ec129/objects? pretty =true&hide_metafields=true

您会注意到有一个带有唯一标识符的 _id 字段。

那么为什么我得到：

“警告：遇到两个具有相同密钥的孩子，:。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一的密钥可能会导致孩子被复制和/或省略——这种行为不受支持，将来可能会改变版本。”

这是我的 FlatList 渲染：

render() {   
    if(this.props.dataToDisplay.objects){
        console.log(typeof(this.props.dataToDisplay.objects))
        console.log(this.props.dataToDisplay.objects)
        this.props.dataToDisplay.objects.forEach((item)=>{
            console.log(item)
        })

        return (
            <View style={[{backgroundColor: this.state.backgroundColor},styles.container]}>
                <FlatList
                    data={this.props.dataToDisplay.objects}
                    keyExtractor={(item, index)=>{item._id.toString()}}
                    renderItem={({item})=>{
                        <Text id={item._id}>{item.title}</Text>
                    }}
                />
            </View>
        );
}
 else {

    return (
        <View style={[{backgroundColor: 
this.state.backgroundColor},styles.container]}>
            <Text>Loading elements.</Text>
        </View>
      );
    }
  }
}

keyExtractor 会不会有问题？我尝试使用 keyExtractor={(item, index)=>{item._id}} 没有结果......

谢谢你的时间。

当我在 中使用onEndReached函数时FlatList，它会被自动调用。

下面是这个问题的链接。

关联

是否有可用的解决方案或 iOS 中的任何替代方案？

编辑：

下面是我试过的代码，但这似乎不起作用。

constructor(props){
        super(props);
        this.state = {
            flatListReady:false
        }
    }

    loadMore(){
        if(!this.state.flatListReady){
            return null;
        }
        else{
            alert("End Reached")
        }
    }

    _scrolled(){
        this.setState({flatListReady:true});
    }

    render() {
        return (
            <Layout style={{ flex: 1 }}>

                <FlatList
                    data={listData}
                    renderItem={({item}) => this._renderItem(item)}
                    keyExtractor={(item, index) => item.key}
                    onEndReached={() => this.loadMore()}
                    onEndReachedThreshold={0.5}
                    onScroll={() => this._scrolled()}
                />

            </Layout>

我有一个隐藏在滚动条上的标题，所以我用来ProgressViewOffset在标题下方显示刷新控制加载器。
它在 Android 上运行良好。但是在 IOS 中我们不支持偏移。但我最终使用了 contentInset 和 contentOffset 但我没有得到它。

          refreshControl: (
        <RefreshControl
          // refreshing
          refreshing={this.props.isloading}
          onRefresh={this.onRefresh}
          progressViewOffset={200}
          />
      ),
      contentInset: {top: 200},
      onMomentumScrollBegin,
      onMomentumScrollEnd,
      onScrollEndDrag,
      ItemSeparatorComponent: this.renderSeparator,
      onScrollEventThrottle: 16,
      automaticallyAdjustContentInsets: false, 
      contentOffset: {x: 0, y: -200},

PS：当我使用 contentContainerStyle 和 contentInset 时，refreshcontrol 和内容之间有一个空格...

Flatlist 允许您定义一个ItemSeparatorComponent接收作为默认道具highlighted和leadingItem. 前导项表示显示在分隔符之前的项。

问题是我inverted在我的 Flatlist 上使用，我的分隔符现在需要适应下一个项目而不是前一个项目。

有没有办法访问分隔符后显示的项目？像一个 trailingItem 之类的东西？