> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_advance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_advance/react-native/yuan-sheng-zu-jian/modal.md).

# Modal

可以用 react-native-modal 模組，但在 native-base 下可能有問題，可以用原生替代。

{% embed url="<https://stackoverflow.com/questions/56941252/native-base-and-modal-not-working-in-react-native>" %}

## 範例

```javascript
 <View style={{ flex: 1 }}>
   <Modal 
     onRequestClose={() => this.setState({})}
     transparent={true} 
     animationType={"slide"} 
     visible={true}>
                <View
                  style={{
                    flex: 1,
                    justifyContent: "center",
                    alignItems: "center",
                    backgroundColor: 'rgba(0,0,0,0.5)'
                  }}
                >
                  <View style={styles.ModalInsideView}>
                    <Text
                      style={{
                        color: "black",
                        fontSize: 14,
                        fontWeight: "700",
                      }}
                    >
                      Hello{" "}
                    </Text>
                  </View>
                </View>
   </Modal>
</View>

const styles = {
  ModalInsideView: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    height: 245,
    width: "90%",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#fff",
  },
};

```

![](https://2356031413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0u4DAqfidGmTt67qrG%2F-MJkJJN5W14Tf5sGLK6p%2F-MJkmGIttd_FD2z2Dfwl%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202020-10-16%20%E4%B8%8B%E5%8D%885.41.14.png?alt=media\&token=34891311-0634-4025-9ecd-f156020b4dd4)