10. [RN] 스크롤 뷰 추가해보기

이번 시간에는 간단하게 스크롤 뷰에 대해 학습하겠습니다.

 

걍 뭐 학습이랄 것도 없습니다. Scrollview 태그 안에 넣기만 하면 됩니다.

class App extends Component{

  state = {
    appName: 'My first app',
    random: [1,2,3,4,5]
  }

  onAddRandomNum = () => {
    //alert('add random number');
    const randomNum = Math.floor(Math.random()*100)+1;
    this.setState(prevState => {
      return {
        random: [...prevState.random, randomNum]
      }
    })
  }

  onNumDelete = (position) => {
    //alert('delete');
    const newArray = this.state.random.filter((num,index) =>{
      return position != index;
    })
    this.setState({
      random: newArray
    })
  }

  render(){
    return (
      <View style={styles.mainView}>
        <Header name={this.state.appName}/>

        <View>
          <Text 
            style={styles.mainText}
            onPress={()=>alert('text touch event')}
            >hello world</Text>
        </View>

        <Generator add={this.onAddRandomNum}/>
        --- 다양한 메서드들이 존재한다!
        <ScrollView
          style={{width: '100%'}}
          // onMomentumScrollBegin={()=>alert('begin')}
          // onMomentumScrollEnd={()=>alert('begin')}
          // onScroll={()=>alert('begin')}  // 움직임이 발생하자 마자 발생
          // onContentSizeChange={(width, height) => alert(height)}
          bounces={true}
        >
        <NumList 
          num={this.state.random}
          delete={this.onNumDelete} 
          />
        </ScrollView>
      </View>
    )
  }
}

 

끝