-
[expo] Changing segment content onPress on react-nativeFrontend/react-native 2019. 11. 6. 18:14
leanmass 프로젝트에
볼륨 탭에 segment를 적용시켜 보려고 한다.
(I'll set segment content page in the Volume Tab on My 'Leanmass' application.)
랜더링 부분은 아래와같이 해준다.
(First, define rendering view.)
<Container> <Header hasSegment> <Body> <Text>볼륨</Text> </Body> </Header> <Segment> <Button style={{ flex: 0.4, flexDirection: "column", alignItems: "center"}} active={this.state.activePage === 1} onPress={this.selectComponent(1)}><Text>기간별</Text></Button> <Button style={{ flex: 0.4, flexDirection: "column", alignItems: "center"}} active={this.state.activePage === 2} onPress= {this.selectComponent(2)}><Text>종목별</Text></Button> </Segment> <Content padder> <View> {this._renderComponent()} </View> </Content> </Containver>필요한 함수를 정의하고
(and define functions)
selectComponent = (activePage) => () => this.setState({activePage}); _renderComponent = () => { if(this.state.activePage === 1) return <Tab1/> //... Your Component 1 to display else return <Tab2/> //... Your Component 2 to display }페이지 구분 상태 변수를 정의한다.
(finally, define variable for distinguish to segment page)
this.state = { activePage:1, // for segment page };결과화면
'Frontend > react-native' 카테고리의 다른 글
How to start react-native with ignite boilerplate. (0) 2020.04.29 [sqlite] weekly & month statistics query (0) 2019.11.08 [expo] react-native android 빌드시 아이콘(icon) 특수문자 깨짐 현상 해결 (0) 2019.10.17 [expo] vector icon (0) 2019.10.15 [expo] [react native] make .csv file (0) 2019.09.23