react native Animated动画如何实现tabBar toggle效果

效果
如果用css3的话很好实现,
使用VUE的话更容易实现,
但是用reactNative Animated的话,特别是使用了ListView列表渲染的话,要怎么写?在state里面声明一堆new Animate.Value(0)吗?

目前react-native的结构代码如下

class AnmtDemo extends Component{
    constructor(prop){
        super(prop);
        var ds=new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!=r2});
        this.data=[1,2,3,4,5,6]
        this.state={
            data:ds.cloneWithRows(this.data),
            selected:0
            anmt_bgColor:new Animated.Value(0)
        }
    }
    _renderRow(data,rowId,i){
        return (
            <TouchableWithoutFeedback
                onPress={()=>{
                    this.setState({
                        selected:i
                    })
                }}>
                <Animated.View>
                    <Text>{data}</Text>
                </Animated.View>
            </TouchableWithoutFeedback>
        )
    }
    render(){
        return (
            <View>
                <listView
                    horizontal={true}
                    randerRow={this._renderRow.bind(this)}
                    dataSource={this.state.data}
                    style={styles.header}
                />
            </View>
        )
    }
}

我希望能够像vue那样,只修改selected的值,然后视图自己去响应,
要怎么做?求方案!!!
谢谢

阅读 2.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题