React Native添加自定义全局组件

心已赠人 2023-07-09 10:29 74阅读 0赞

在开发rnApp的时候想自己封装一个自定义的Toast组件，又不想在每个组件文件内单独引用，于是自己琢磨了一个方法将组件添加到全局。

这里举例封装一个自定义的Toast组件，这个文件可以放在自己的公共组件文件夹下

ToastTip.js

  1. /* * @Date: 2020-02-26 17:40:34 * @Description: 自己封装Toast提示 * @Author: YooHoeh * @LastEditors: YooHoeh * @LastEditTime: 2020-02-28 18:09:17 */
  3. import React, {  Component } from "react";
  4. import {  StyleSheet, Text, View, Dimensions, Modal } from "react-native";
  5. const windows = Dimensions.get("window");
  6. export default class ToastTip extends Component { 
  7.     constructor() { 
  8.         super();
  9.         this.state = { 
  10.             modalVisible: false,
  11.             content: undefined
  12.         };
  13.     }
  15.     show(content) { 
  16.         setTimeout(() => { 
  17.             this.setModalVisible(false);
  18.         }, 1800);
  19.         this.setState({ 
  20.             modalVisible: true,
  21.             content
  22.         });
  23.     }
  25.     setModalVisible(visible) { 
  26.         this.setState({  modalVisible: visible });
  27.     }
  29.     render() { 
  30.         if (!this.state.modalVisible) return <View />;
  31.         const {  content } = this.state;
  32.         return (
  33.             <Modal
  34.                 animationType="slide"
  35.                 transparent={ true}
  36.                 visible={ this.state.modalVisible}
  37.                 onRequestClose={ () => { 
  38.                     alert("Modal has been closed.");
  39.                 }}
  40.             >
  41.                 <View style={ styles.container}>
  42.                     <View style={ styles.content}>
  43.                         <Text style={ styles.contentText}>{ content}</Text>
  44.                     </View>
  45.                 </View>
  46.             </Modal>
  47.         );
  48.     }
  49. }
  50. module.exports = ToastTip;
  52. const styles = StyleSheet.create({ 
  53.     container: { 
  54.         position: "absolute",
  55.         bottom: 50,
  56.         width: windows.width,
  57.         justifyContent: "center",
  58.         alignItems: "center"
  59.     },
  60.     content: { 
  61.         borderRadius: 4,
  62.         paddingVertical: 4,
  63.         paddingHorizontal: 8,
  64.         backgroundColor: "#000000cc"
  65.     },
  66.     contentText: { 
  67.         color: "#fff",
  68.         lineHeight: 17
  69.     }
  70. });

然后在项目根目录下，找到App.js文件
导入ToastTip组件,然后在render生命周期里将组件渲染，这里需要注意：必须将组件作为在顶层容器的第一个子组件,否则可能出现公共组件调用时未渲染。

App.js

  1. import ToastTip from "./components/ToastTip";
  2. ……
  3. class App extends Component { 
  4. ……
  5.     render(){ 
  6.         return (<View>
  7.              //这里用global而不用this。
  8.              //$toastTip可以自己随意更改，我这里添加$只是为了使用时区别一般变量。
  9.             <ToastTip ref={ toastTip => global.$toastTip = toastTip}/>  
  10.             ……
  11.         </View>)
  12.     }
  13. }

使用方法如下
在任意想要调用的文件内，无需另外引入。

xxx.js

  1. class xxx { 
  2.     xx(){ 
  3.         $toastTip.show('Bingo！')
  4.     }
  5. }

发表评论

表情：
评论列表 （有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读