反应原生TabBarIOS过渡动画？

Question

是否有可能为由TabBarIOS呈现和显示的视图进行转换？导航器组件具有它们。 我有实现导航和控制通过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的例子