先通过 ethereum?.providerMap 尝试找 MetaMask，如果找不到，返回默认的 ethereum

export default function getEthereum() {
  let ethereum = (window as any).ethereum?.providerMap?.get('MetaMask') || (window as any).ethereum?.providerMap?.get('metamask') || (window as any).ethereum?.providerMap?.get('Metamask')
  if (!ethereum) { 
    ethereum = (window as any).ethereum
  }
  return ethereum
}

使用方法：

const ethereum = getEthereum()

有时需要调用其它语言生成的 ts 代码，因为是生成的，很多语法不规范，会导致无法编译或者运行
如果不规范的地方很多，每个地方去更改，效率很低
效率最高的做法是去每个文件顶部添加 // @ts-nocheck

首先进入 ts 的文件夹，然后运行 shell 脚本：

find . -name "*.ts" -type f | while read file \
do \ 
  echo -e "// @ts-nocheck\n$(cat $file)" > $file \
done

Create React Native project by Expo

https://docs.expo.dev/guides/typescript/#starting-from-scratch-using-a-typescript-template

Use NativeWind

https://www.nativewind.dev/quick-starts/expo
https://www.nativewind.dev/getting-started/typescript

Install these two packages

yarn add nativewind
yarn add --dev tailwindcss

Setup Tailwind CSS

Run this cli to create file tailwind.config.js

npx tailwindcss init

Edit tailwind.config.js as follows

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create file app.d.ts and edit

/// <reference types="nativewind/types" />

Use react-native-paper

https://callstack.github.io/react-native-paper/4.0/getting-started.html

Import package

yarn add react-native-paper

Edit babel.config.js

module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  }
}

Edit App.tsx

import { StatusBar } from 'expo-status-bar'
import { View } from 'react-native'
import { Provider as PaperProvider, Button, Paragraph } from 'react-native-paper'
export default function App() {
  return (
    <PaperProvider>
      <View className="flex-1 items-center justify-center bg-white">
        <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
          Press me
        </Button>
        <Paragraph className='text-[#0000ff]'>Paragraph</Paragraph>
        <StatusBar style="auto" />
      </View>
    </PaperProvider>
  )
}

Run

yarn ios

if not working, close App and try:

npx expo run --ios -c

1. 新建React Native空白项目

2. 安装依赖：

   yarn add @react-navigation/bottom-tabs react-native-safe-area-context createBottomTabNavigator

3. 最简洁的tabbar示例，App.tsx里放置代码：

   import * as React from 'react';
   import { Text, View } from 'react-native';
   import { NavigationContainer } from '@react-navigation/native';
   import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
   
   function HomeScreen() {
     return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
     );
   }
   
   function SettingsScreen() {
     return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
     );
   }
   
   const Tab = createBottomTabNavigator();
   
   export default function App() {
     return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
     );
   }

   官方文档：https://reactnavigation.org/docs/tab-based-navigation#minimal-example-of-tab-based-navigation

onChange={(e)=>{
  if (! /^\d?(\d+[\.]?\d*)?$/.test(e.target.value) ) return
  setInputVal(e.target.value)
}}

^\d?表示0个或1个数字开头
\d+表示1个或1个以上数字
[.]?表示0个或者1个小数点
\d*表示0个或0个以上的数字
(\d+[.]?\d*)?表示括号里可以重复0遍或0遍以上次数
(\d+[.]?\d)?$表示以(\d+[.]?\d)?结尾