231219_学习React Native

跟着https://www.youtube.com/watch?v=1oYw1uwDZb8 边做边学，然后自己魔改一个

環境構築

正如 https://reactnative.dev/docs/environment-setup 官方文档通り，有两种方式。

新手适合用Expo Go，类似一个沙盒环境
移动端ベテラン可以考虑用React Native CLI。需要安装配置好Android Studio或Xcode

我是移动端初心者，今の所就用Expo Go吧

create-expo-app创建React Native project

expo start会让Expo CLI起一个development server，并生成一个二维码

npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

然后手机上安装Expo Go app，手机和电脑连上相同的wifi，扫二维码，运行项目

如果扫二维码后连接不上项目，log里报错failed to connect to，参考 https://stackoverflow.com/questions/66573454/expo-go-cant-connect-with-project ，用tunnel隧道连接。用了tunnel也不需要手机电脑连相同wifi了

但expo文档也说了Using the Tunnel connection type will make the app reloads considerably slower than on LAN or Local, so it’s best to avoid tunnel when possible. You may want to install an emulator/simulator to speed up development if Tunnel is required for accessing your machine from another device on your network.

Develop for Web

https://docs.expo.dev/workflow/web/

npx expo install react-dom react-native-web @expo/webpack-config

可以尝试web打开，npm run web实质就是expo start --web（但不知道为啥npx expo start --web才work）

Android Studio Emulator

https://docs.expo.dev/workflow/android-studio-emulator/

yay -S android-studio

然后照着文档做

kvm硬件加速安卓模拟器 https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

给zsh和fish添加环境变量：~/.zshrc和~/.config/fish/config.fish中写入

export ANDROID_HOME=/home/hl_tang/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

当前终端下输入source $HOME/.zshrc&source ~/.config/fish/config.fish来reload环境变量

最终目的是可以run adb from your terminal.

但我实践下来zsh没问题，fish添加这三行后报错估计是和tide有关系，不过先从fish切到zsh后运行adb再切回fish后也可以识别adb了

如果终端可以识别adb的话，那就可以npm run android在模拟器上运行

关于Expo的一些坑

最好装上expo-cli

yay -S expo-cli

然后npm list -g也有expo-cli了（虽然我挺排斥全局安装的）（但真的有项目npx expo start跑不起来，但装了expo-cli就跑起来了）

既然都装了expo-cli，也没必要再npx了。shell已经能识别expo命令了

关于tunnel

https://docs.expo.dev/get-started/create-a-project/ 看”Is the app not loading on your device?”

First, make sure you are on the same Wi-Fi network on your computer and your device.

If it still doesn't work, it may be due to the router configuration — this is common for public networks. You can work around this by choosing the Tunnel connection type when starting the development server, then scanning the QR code again.

npx expo start --tunnel

注意：npm run start --tunnel不work，试下来一定得是expo start --tunnel

具体写法

定义function based的component

<View>相当于<div>用来wrap各种东西。一个functon based的component只能返回一个标签，不能多个标签并列关系 (JSX expressions must have one parent element)，即用<View>包起来。

<TextInput />是self closing的component，可以做输入框

导入Tailwind CSS

可以用NativeWind包 https://www.nativewind.dev/

文档里只有yarn

yarn add nativewind
yarn add --dev tailwindcss@3.3.2

要用npm的话也可以这样

npm install nativewind
npm i -D tailwindcss@3.3.2

但是 https://stackoverflow.com/questions/76688256/getting-error-use-processcss-thencb-to-work-with-async-plugins によると，还是用yarn吧，但更关键的是tailwindcss@3.3.2 。我也碰到这个问题，好久才发现

配置tailwind.config.js记得改<custom directory>

content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],

一个NativeWindに基づくdark mode切り替えるdemo

https://www.nativewind.dev/api/use-color-scheme

import { StatusBar } from 'expo-status-bar';
import { Text, View, TouchableOpacity, Switch } from 'react-native';
import { useColorScheme } from 'nativewind';

export default function App() {
  const {colorScheme, toggleColorScheme} = useColorScheme();

  return (
    <View className="flex-1 items-center justify-center dark:bg-slate-800">
      <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
      <Switch value={colorScheme === 'dark'} onChange={toggleColorScheme} />
      <Text className="text-yellow-200">Open up App.js to start working on your app!</Text>
      <Text className="text-3xl font-semibold text-sky-700 dark:text-yellow-200">NativeWind ネーティブ風</Text>
      <TouchableOpacity className="bg-teal-500 p-3 rounded-xl mt-5 shadow-md shadow-gray-400"
      onPress={toggleColorScheme}>
        <Text className="text-slate-100 text-lg">点我切换主题</Text>
      </TouchableOpacity>
    </View>
  );
}