Question

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

Answer 1

def polDict(s1): infile=open(s1,'r') content=infile.read() counters={} party='1234' wordList = content.split() for i in wordList: if i in party: if i in counters: counters[i]+=1 else: counters[i]=1 for i in counters: print('{:2} {}'.format(i,counters[i]))

React Native v0.21

基于https://github.com/facebook/react-native/blob/0.21-stable/Examples/UIExplorer/AnimatedExample.js#L105-L141

的

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

示例

React Native TabBarIOS过渡动画？

1 个答案: