在动画translateX之后元素曾经是空白的空白

Question

我正在运行最新版本的react-native（0.44）并做出反应（16.0.0-alpha.6）

在通过变换成功动画化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
    },
});