Modal不适用于iPhone上的LayoutAnimation

时间:2017-09-23 04:13:00

标签: react-native

这就是我要做的,基本上,单击Open Modal按钮打开模态,然后单击模态内的Close Modal按钮将其关闭。下面两张图片是两种情况的样子。

这是我的代码:

    export default class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
                showModal: false
            };
        }

        componentWillUpdate() {
            if(PlatForm.OS === 'android') {
               UIManager.setLayoutAnimationEnabledExperimental(true);
            }
            LayoutAnimation.easeInEaseOut();
        }

        render() {
            return (
                <View style={{ ... }}>
                    <TouchableOpacity onPress={() => this.setState({ showModal: true })}>
                        <Text style={{ ... }}>
                            Open Modal
                        </Text>
                    </TouchableOpacity>
                    <Modal visible={this.state.showModal} animationType='slide'>
                        <View style={{ ... }}>
                            <TouchableOpacity onPress={() => this.setState({ showModal: false })}>
                                <Text style={{ color: 'white', fontSize: 20 }}>
                                    Close Modal
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </Modal>
                </View>
            );
        }
    }

在IOS模拟器上运行时,一切都按预期工作,但在iPhone上运行时问题会增加。当按Close Modal时,模态会消失半秒钟,然后再次重新打开,这次,Close Modal按钮将无效,我无法重新关闭模态。我所能做的就是重建项目。但是,当我删除componentWillUpdate()时,它会再次运行,无论是在模拟器上还是在iPhone上

When modal is closed

When modal is open

1 个答案:

答案 0 :(得分:1)

我相信这是最近版本的React Native中引入的错误。目前,您最好的选择是禁用LayoutAnimation。不太理想......我知道。

请参阅Github上的讨论:https://github.com/facebook/react-native/issues/16182