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를 사용할 수 있습니다. scrollview의 총 내용을 가져온 다음 애니메이션 값 간격으로 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 
    } 
});