React-Native 项目采用 Typescript 处理 Global 全局变量的方案

0、前言

在普通的 React-Native 项目中，全局变量 Global 设置很简单，很多地方也有例子，就不赘述了。当 React-Native 项目中引入了 Typescript 需要重新处理一下才能使用。

1、改造 Global.ts

将 setGlobal 设置为一个函数

import { Dimensions, Platform , PixelRatio } from "react-native";

const OS = Platform.OS
const { width, height } = Dimensions.get('window');

const setGlobal = () => {
  
  global.gMainColor = '#353F5B'
  global.gDevice = OS
  global.gScreen = {
    screen_width: width,
    screen_height: height,
    onePixelRatio: 1 / PixelRatio.get(),  
  }

  //全局域名
  global.gBaseUrl = ''
}

export default setGlobal

2、App.tsx

//引入 setGlobal
import setGlobal from './common/Global';

export default class App extends React.Component {
  componentDidMount() {
    //执行此函数
    setGlobal()
  }
  render() {
    const appNav = AppNavigator()
    return (
      <Provider 
        theme={{ 
          search_bar_fill: 'transparent',
          color_link: gMainColor
        }}
      >
        {appNav}  
      </Provider>
    );  
  }
  
}