Question

我正在使用react-native-simple-modal在Android设备中显示模型。此处模型始终在屏幕中央打开。在构造函数中设置初始偏移值无效。但是moveUp功能运行良好。如何在屏幕顶部显示模型？此外，我需要将模型放在组件下方。

CODE：

constructor(props) {
    super(props);
    this.state = {
        open: false,
        offset: -200,
    };
}
moveUp = () => this.setState({offset: -200})
openModal = () => this.setState({open: true})

closeModal = () => this.setState({open: false})
render() {
    return (
        <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
            <TouchableOpacity onPress={this.openModal}>
                <Text>Open modal</Text>
            </TouchableOpacity>
            <Modal
                offset={this.state.offset}
                open={this.state.open}
                modalDidOpen={this.modalDidOpen}
                modalDidClose={this.modalDidClose}>
                <View style={{alignItems: 'center'}}>
                    <Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
                    <TouchableOpacity
                        onPress={this.moveUp}>
                        <Text>Move modal up</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this.resetPosition}>
                        <Text>Reset modal position</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this.closeModal}>
                        <Text>Close modal</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
        </View>
    )
};

Answer 1

目前没有选项可以根据您在初始阶段的偏移量来调整模态。我刚刚浏览了 react-native-simple-modal 的内部代码，发现第一次没有理解通过props发送的偏移量。如果您希望实现此功能，那么您可以要求此模块的作者更新以下代码，或者您可以在此模块上合并PR 。

在 react-native-simple-modal 的主要index.js文件中，您可以看到默认状态偏移被设置为 0 而不是通过道具发送的偏移来理解它。因此，将以下行更改为： -

  state = {
    opacity: new Animated.Value(0),
    scale: new Animated.Value(0.8),
    offset: new Animated.Value(0)
  };

到下面的代码： -

  state = {
    opacity: new Animated.Value(0),
    scale: new Animated.Value(0.8),
    offset: new Animated.Value(this.props.offset)   ===>> update this initial value.
  };

这个偏移在初始阶段之后工作正常，因为模块的作者已经理解组件的 componentWillReceiveProps 生命周期钩子中的props偏移。因此，只需要求作者更新此内容，或者您可以为此提出 PR 。我已经通过更新node_modules中的值来检查这一点，如果您只是想根据您的要求检查它是否正常工作，那么您也可以更新一次并检查出来。

我希望这会对你有所帮助，如果你有任何问题，请告诉我。

设置初始偏移值不起作用

1 个答案: