react实现轮播图，以及实现绑定组件。

淡淡的烟草味﹌ 2021-07-26 00:40 432阅读 0赞

react实现轮播图，以及实现绑定组件。  
绑定组件：  
**//  
创建一个变量, 与某个组件绑定  
fl = React.createRef();  
在html中创建ref=\{this.fl\}，  
在函数中操作：this.fl.current.scrollToIndex(\{index: this.current\})  
具体看以下代码**

// rnc
    import React, { Component} from 'react';
    import { Dimensions, FlatList, Image, Text, View} from 'react-native';
    
    const { width, height} = Dimensions.get('screen');
    
    const rpx = x => (width / 750) * x;
    
    export default class App extends Component { 
      douyu = 'http://capi.douyucdn.cn/api/v1/live?limit=20&offset=0';
    
      state = { data: []};
    
      componentDidMount() { 
        fetch(this.douyu)
          .then(res => res.json())
          .then(res => { 
            console.log(res);
            this.setState({ data: res.data});
    
            //请求结束时, 添加定时器
            setInterval(() => { 
              // 每2.5秒, 让 FlatList 滚动到下一个
              // console.log(this.fl); //debug模式可以看打印, 但是尽量不开. 会导致定时器bug
    
              // 刷新时, 会有报错; 关闭应用 重新打开即可
    
              // 超出限制: 当序号为最大值(长度-1) 则变为0 否则+1
              this.current =
                this.current == this.state.data.length - 1 ? 0 : this.current + 1;
    
              this.fl.current.scrollToIndex({ index: this.current});
            }, 2500);
          });
      }
    
      current = 0; //滚动操作的 当前页序号
    
      //创建一个变量, 与某个组件绑定
      fl = React.createRef();
    
      render() { 
        return (
          <View>
            <FlatList
              // ref属性 用于绑定 自身 和 某个变量
              ref={ this.fl}
              data={ this.state.data}
              keyExtractor={ (item, index) => index + ''}
              renderItem={ this._renderItem}
              // 横向 和 多列是 互斥关系. 不能同时出现
              // numColumns={2}
              // horizontal:横向滚动
              horizontal
              // 按页滚动
              pagingEnabled
              // onScroll: 监听滚动操作的事件
              onScroll={ this._onScroll}
            />
          </View>
        );
      }
    
      _onScroll = event => { 
        // React触发的事件参数做过特殊处理: 同步虚拟事件.
        // 要想看打印的值, 必须先调用: event.persist()
        // event.persist();
        // console.log(event);
    
        // 通过滚动操作中 x 轴的位移, 除以屏幕宽度, 就可以知道移动了几个屏
        const offset_x = event.nativeEvent.contentOffset.x;
    
        // width: 屏幕宽
        // round: 四舍五入的方式做处理
        const current = Math.round(offset_x / width);
        console.log(current);
        // 滚动操作 实时更新当前页数
        this.current = current;
      };
    
      _renderItem = ({ item}) => { 
        const online =
          item.online >= 1e4 ? (item.online / 1e4).toFixed(1) + '万' : item.online;
    
        return (
          <View style={ { width}}>
            <View style={ { borderRadius: 5, overflow: 'hidden'}}>
              <Image
                source={ { uri: item.room_src}}
                style={ { width: '100%', height: width * 0.55}}
              />
              <Text
                style={ { 
                  position: 'absolute',
                  right: 0,
                  color: 'white',
                  padding: 2,
                  backgroundColor: 'rgba(0,0,0,0.2)',
                  left: 0,
                  textAlign: 'right',
                }}>
                { online}
              </Text>
              <Text
                style={ { 
                  position: 'absolute',
                  color: 'white',
                  bottom: 0,
                  padding: 4,
                }}>
                { item.nickname}
              </Text>
            </View>
            <Text
              style={ { fontSize: rpx(30), margin: 2, color: 'gray'}}
              numberOfLines={ 1}>
              { item.room_name}
            </Text>
          </View>
        );
      };
    }