React Native 响应本地动画模态,从左到右显示

vulvrdjw  于 2023-02-05  发布在  React
关注(0)|答案(2)|浏览(149)

我怎样才能使我的模态显示从左到右的方式抽屉出来。我使用的模态从'react-native',但我也安装了react-native-modal模块从https://github.com/react-native-community/react-native-modal/blob/master/README.md
这是我的准则

<Modal visible={this.state.modalOpen} animationType='slide' transparent={true} >
          <ShortCut />
        </Modal>
0ve6wy6x

0ve6wy6x1#

在react-native-modal中,可以使用animationIn和animationOut。如果是从右到左,则使用slideInRight

import React from 'react';

import Modal from 'react-native-modal';

    return (
      <Modal
        testID={'modal'}
        isVisible={this.isVisible()}
        animationIn="slideInLeft"
        animationOut="slideOutRight">
        <ShortCut />
      </Modal>
    );
5lhxktic

5lhxktic2#

在ikmo之前的回答基础上:
不使用内置的Modal组件("从'react-native'导入{Modal};),您可以使用react-native-modal:
通过在终端中运行来安装:
npm install react-native-modal
然后导入新安装的Modal:
import Modal from 'react-native-modal';
现在,正如ikmo所建议的,您可以使用animationInanimationOut prop ,以便使它按照您想要的方式工作。
例如:

<Modal
  isVisible={modalVisible}
  animationIn="slideInRight"
  animationOut="slideOutRight"
>
  <View>
    <View>
      <Text>Hello World</Text>
      <Pressable
        onPress={() => setModalVisible(!modalVisible)}
      >
        <Text>Hide Modal</Text>
      </Pressable>
    </View>
  </View>
</Modal>

(基本上只是再次强调了前面的答案,因为看看你对它的评论,你错过了ikmo谈论的是react-native-modal组件而不是内置组件的要点)

相关问题