The React-Native project uses Typescript to handle Global global variables

Time:2022-8-5

0. Preface

In an ordinary React-Native project, the global variable Global setting is very simple, and there are examples in many places, so I won't go into details. When Typescript is introduced into the React-Native project, it needs to be reprocessed before it can be used.

1. Transform Global.ts

set setGlobal to a function

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 domain name
  global.gBaseUrl = ''
}

export default setGlobal

2、App.tsx

//Introduce setGlobal
import setGlobal from './common/Global';

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

Recommended Today

[What is Istio? ] If you don't know, you're out, a 40-minute text can be quickly understood

@[toc] foreword This article is purely theoretical and contains the following content, read it as needed: Istio concepts, service mesh, traffic management, istio architecture (Envoy, Sidecar, Istiod) Virtual Service (VirtualService), Routing Rules, Destination Rules (DestinationRule) Gateway, network resiliency and testing (timeouts, retries, circuit breakers, fault injection) What is Istio? Istio is an open sourceservice mesh, […]