Javascript 设置translateX动画后元素所在的空白区域

我正在运行react native（0.44）和react（16.0.0-alpha.6）的最新版本

在通过transform成功设置translateX动画的同时，我在元素原来所在的位置留下了一个空白

安装组件后，将启动动画：

// Animation invoker
componentDidMount () {
    this.animateMoveOut();
}
// Animation function
animateMoveOut () {
    this.animateXValue.setValue(1);
    Animated.timing(
        this.animateXValue,
        {
            toValue: 0,
            duration: 1000,
            easing: Easing.linear
        }
    ).start();
}
// animated stylesheet object
const transform = [{
    translateX: this.animateXValue.interpolate({
        inputRange: [0, 1],
           outputRange: [-300, 0]
        }),
    }];

我在容器视图中渲染两个视图。左边的一个从图片中移出并留下空白的。右侧面板（

WebView

）不能全宽伸缩。我该怎么做

结果是：

代码如下：

export default class WebViewExample extends React.Component {
    constructor() {
        super();
        this.state = {
            menuState: 'closed',
            activeTitle: 'Google',
            activeLink: 'https://www.google.com',
            links: [
                {
                    title: 'Google',
                    url: 'https://www.google.com',
                },
                {
                    title: 'Facebook',
                    url: 'https://www.facebook.com',
                },
                {
                    title: 'Twitter',
                    url: 'https://www.twitter.com',
                },
            ]
        };

        this.animateXValue = new Animated.Value(1);
    }

    componentDidMount () {
        this.animateMoveOut();
    }

    render() {
        const transform = [{
            translateX: this.animateXValue.interpolate({
                inputRange: [0, 1],
                outputRange: [-300, 0]
            }),
        }];
        return (

            <View style={styles.container}>
                <Animated.View style={{
                    backgroundColor: '#e7e4ff',
                    transform,
                    display: this.state.menuState === 'closed' ? 'none' : 'inline',
                }}
                >
                    <Button
                        title="Google"
                        icon={{name: 'google', type: 'material'}}
                        onPress={() => this._onNavigateButtonPress('Google')}
                    />
                    <Button
                        title="Facebook"
                        icon={{name: 'facebook', type: 'material-community'}}
                        onPress={() => this._onNavigateButtonPress('Facebook')}
                    />
                    <Button
                        title="Twitter"
                        icon={{name: 'twitter', type: 'material-community'}}
                        onPress={() => this._onNavigateButtonPress('Twitter')}
                    />
                </Animated.View>
                <WebView
                    source={{uri: this.state.activeLink}}
                    style={styles.webView}
                />
            </View>
        )
    }

    _onNavigateButtonPress = function(navid) {
        console.log(' >> >> >> >> >> Navigating webview to ' + navid);
        let navlink = this.state.links.filter((link) => link.title === navid)[0].url;
        this.setState({activeLink: navlink, activeTitle: navid});
    };

    animateMoveIn () {
        this.animateXValue.setValue(0);
        Animated.timing(
            this.animateXValue,
            {
                toValue: 1,
                duration: 1000,
                easing: Easing.linear
            }
        ).start();
    }
    animateMoveOut () {
        this.animateXValue.setValue(1);
        Animated.timing(
            this.animateXValue,
            {
                toValue: 0,
                duration: 1000,
                easing: Easing.linear
            }
        ).start();
    }
}
const styles = StyleSheet.create({
    container: {
        // display: 'flex', // makes no difference
        flexDirection: 'row',
        flex:1,
    },
    webView: {
        // flex: 1, // makes no difference
    },
});

导出默认类WebViewExample扩展React.Component{
构造函数（）{
超级（）；
此.state={
menuState:'已关闭'，
activeTitle:'谷歌'，
activeLink:'https://www.google.com',
链接：[
{
标题：“谷歌”，
网址：'https://www.google.com',
},
{
标题：“Facebook”，
网址：'https://www.facebook.com',
},
{
标题：“推特”，
网址：'https://www.twitter.com',
},
]
};
this.animateXValue=新的Animated.Value（1）；
}
组件安装（）{
这个.animateMoveOut（）；
}
render（）{
常数变换=[{
translateX:this.animateXValue.interpolate({
输入范围：[0，1]，
输出范围：[-300，0]
}),
}];
返回(
这个。_onNavigateButtonPress（'Google'）}
/>
这个。_onNavigateButtonPress（'Facebook'）}
/>
这个。_onNavigateButtonPress（'Twitter'）}
/>
)
}
_onNavigateButtonPress=函数（navid）{
console.log（'>>>>>>>>>>>将webview导航到'+navid'）；
让navlink=this.state.links.filter（（link）=>link.title==navid）[0].url；
this.setState（{activeLink:navlink，activeTitle:navid}）；
};
动静脉（）{
此.animateXValue.setValue（0）；
时间(
这个.animateXValue，
{
toValue:1，
持续时间：1000，
放松：放松。线性
}
).start（）；
}
animateMoveOut（）{
这个.animateXValue.setValue（1）；
时间(
这个.animateXValue，
{
toValue:0，
持续时间：1000，
放松：放松。线性
}
).start（）；
}
}
const styles=StyleSheet.create({
容器：{
//显示：“flex”，//没有区别
flexDirection:'行'，
弹性：1，
},
网络视图：{
//flex:1，//没有区别
},
});

这方面有什么更新吗？@VishweshJainkuniya对不起，我再也没有这个项目的信息了。我记得我设法把它修好了。检查页面加载时应用的值。确保没有触发任何javascript事件，并且没有应用错误的默认X:Y值