React Native TabBarIOS 过渡动画？答案

【问题标题】：React Native TabBarIOS transition animation?React Native TabBarIOS 过渡动画？
【发布时间】：2015-09-25 21:32:37
【问题描述】：

TabBarIOS 渲染和显示的视图是否可以转换？ Navigator 组件具有它们。我必须实现一个导航器并通过 TabBarIOS 控制它，这似乎有点啰嗦

【问题讨论】：

标签： animation tabs transition react-native navigator

【解决方案1】：

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>
    )
  }
}

基于来自https://github.com/facebook/react-native/blob/0.21-stable/Examples/UIExplorer/AnimatedExample.js#L105-L141 的Animated 示例

【讨论】：