React原生TabBarIOS过渡动画？

Question

是否可以对由TabBarIOS呈现和显示的视图进行转换？Navigator组件提供了它们。我必须实现一个导航器，并通过TabBarIOS控制它，这看起来有点冗长

Answer 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示例