personalizar - efectos en android studio

¿Cómo obtener el efecto marquesina con vista de lista en reaccionar nativo?

Question

Estoy tratando de obtener el efecto de marquesina en la vista de lista nativa de reacción. Estoy tratando de implementar de esta manera.

<ListView
    horizontal={true}
    ref={ref => this.infoListView = ref}
    showsHorizontalScrollIndicator={false}
    automaticallyAdjustContentInsets={false}
    onContentSizeChange={(contentWidth,contentHeight)=>{        
      this.moveListToEnd()
    }}
    onEndReached={()=>this.moveListToTop()}
    enableEmptySections={true}
    style={styles.infolist}
    dataSource={this.state.dataSource}
    renderRow={(rowData,sectionID,rowID) => < Row data={rowData} rowID = {rowID}/>} />



moveListToEnd(){
    this.infoListView.scrollToEnd({animated: true});
}

moveListToTop(){
    this.infoListView.scrollTo({x: 0, y: 0, animated: true})
    this.moveListToEnd();
}

Answer 1

He descubierto la manera de hacerlo. Instale NPM reaction-timer-mixin primero. Y usa este código

var moveListTimer = require(''react-timer-mixin'');

const ds = '''';
var timerInterval = 10;
var moveListTimerId;
var pos = 0;
var ListArr = [];



class MarqueeListClass extends Component{

constructor(props){
    super(props);
    ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(ListArr),
        listLength:ListArr.length,
        listmovingdirection:''right'',
    };
}


componentDidMount() {
    moveListTimerId = moveListTimer.setInterval( () => { 
        this.moveList();
    }, timerInterval);
}


componentWillUnmount() {
  moveListTimerId && clearInterval(moveListTimerId);
}

moveList(){
    if(this.state.listmovingdirection===''right''){
        this.moveListToRight();
    }
    else if(this.state.listmovingdirection ===''left''){
        this.moveListToLeft();
    }
}

moveListToEnd(){
    this.ListView.scrollToEnd({animated: true});
}

moveListToRight(){
    pos = pos + 0.5; 
    this.ListView.scrollTo({x: pos, y: 0, animated: true})
}

moveListToLeft(){
    if(pos>0){
        pos = pos - 0.5;
        this.ListView.scrollTo({x: pos, y: 0, animated: true})
    }
    else{
        this.setState({listmovingdirection:''right''});
    } 
}

onListReachEnd(){
    this.setState({listmovingdirection:''left''});
}

render(){

   return(
    <View style = {styles.main}>
                <ListView
                    horizontal={true}
                    ref={ref => this.ListView = ref}
                    showsHorizontalScrollIndicator={false}
                    automaticallyAdjustContentInsets={false}
                    onEndReached={()=>this.onListReachEnd()}
                    enableEmptySections={true}
                    style={styles.list}
                    dataSource={this.state.dataSource}
                    renderRow={(rowData,sectionID,rowID) => < Row info={rowData} rowID = {rowID}/>} />  
    </View>
  );
}
}