react-native - React Native - 自定义组件中的模态未显示

Question

我是 React Native 的新手，目前正在学习开发聊天应用程序。

我有一个Modal包含评级 UI

使用这些方法

ChatScreen.js

<Modal isVisible={showRateModal}  >
    <RatingModal />
</Modal>

RatingModal.js

<View style={styles.container}>
    <RatingEmojiSection />
    <View style={styles.buttonContainer}>
            <Button/>
               
     </View>
</View>

---

不工作

It works all fine but when I move `Modal` into `RatingModal.js`, the Modal wont be showing anymore. Here is my approach 
import { Modal } from 'react-native-paper';

<Modal isVisible={showRateModal}  >
    <View style={styles.container}>
        <RatingEmojiSection />
        <View style={styles.buttonContainer}>
                <Button/>
               
         </View>
    </View>
</Modal>

任何人都知道为什么会发生这种情况？PS：showRateModal状态运行良好。我只是好奇为什么我不能将Modal包装器移入RatingModal.js？

Answer 1

我认为您当前的代码有两个问题

首先，您要渲染两个Modals： ChatScreen.js 包含一个<Modal>，然后您RatingModal的代码也包含一个<Modal>渲染。

第二：从react-native 文档中您可以看到所需的属性不是isVisiblebut visible。

解决这两个问题应该可以解决您的问题。