is possible have transitions views rendered , displayed tabbarios? navigator component has them. i'm having implement navigator , control via tabbarios, seems bit long winded
react native v0.21
class tabs extends component { constructor(props) { super(props) this.state = { tab: 1 } } render() { this.anim = new animated.value(0) return ( <view style={{ flex: 1 }}> <tabbarios> <tabbarios.item title="tab 1" selected={this.state.tab === 1} onpress={() => { this.setstate({ tab: 1 }) animated.spring(this.anim, { tovalue: 0, velocity: 3, tension: -10, friction: 1 }).start() }}> <animated.view style={[{ flex: 1, backgroundcolor: 'red', justifycontent: 'center', alignitems: 'center', transform: [ { scale: this.anim.interpolate({ inputrange: [0, 1], outputrange: [1, 4], }) }, { translatex: this.anim.interpolate({ inputrange: [0, 1], outputrange: [0, 500], }) }, { rotate: this.anim.interpolate({ inputrange: [0, 1], outputrange: [ '0deg', '360deg' ], }) }, ] }]}> <text>tab 1</text> </animated.view> </tabbarios.item> <tabbarios.item title="tab 2" selected={this.state.tab === 2} onpress={() => { this.setstate({ tab: 2 }) }}> <text>tab 2</text> </tabbarios.item> </tabbarios> </view> ) } }
based on example animated
https://github.com/facebook/react-native/blob/0.21-stable/examples/uiexplorer/animatedexample.js#l105-l141
Comments
Post a Comment