React Nativeでスクロールをアニメーション化するには

Question

（ReactNativeアプリ内で）水平スクロールListViewのデータがたくさんあります。私は約3分のコースでテキストをスクロールしたい（これはバウンスやイベントではない）。私はそれを行う方法の例を見つけることができません。 ListView.scrollTo()の機能はすべて合っているようですが、制御された漸進的なスクロールは許可されません。また、可能であればネイティブアニメーションを使用したいと思っています。おそらくtransformでしょうか？

export default class App extends React.Component { 
    // Initialize the hardcoded data 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([ 
     'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon' 
     ]) 
    }; 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      horizontal={true} 
      style={styles.content} 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
    }, 
    content: { 
    flex: 1, 
    padding: 5 
    } 
}); 

Answer 1

これにアニメーションAPIを使用できます。スクロールビューの合計コンテンツサイズを取得し、アニメーション値の間隔でscrollToを使用してビューをスクロールします。あなたのコードはこれに似たものになります。透明性の

export defaul class App extends React.Component { 
    // Initialize the hardcoded data 
    constructor(props) { 
    super(props); 
    this._contentWidth = 0; 
    this.animatedValue = new Animated.Value(0); 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([ 
     'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 
     'Daryl', 'Donny', 'Frederick', 'Fanny', 'Fanulf', 'Gordon', 

     ]) 
    }; 
    } 

    componentWillMount() { 

    let self = this; 

    this.animatedListenerId = this.animatedValue.addListener(
     ({value}) => { 
     console.log("VALUE: ", value) 
     this.refs.listview.scrollTo({x: (self._contentWidth/180)*value, y:0, animated: false}) 
     }); 

    Animated.timing(this.animatedValue, { 
     toValue: 180, 
     duration: 180*1000, 
     easing: Easing.linear 
    }).start(); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      ref='listview' 
      horizontal={true} 
      style={styles.content} 
      dataSource={this.state.dataSource} 
      onContentSizeChange = {(contentWidth, contentHeight) => { 
      this._contentWidth = contentWidth 
      }} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
    }, 
    content: { 
    flex: 1, 
    padding: 5 
    } 
});