跨平台框架React Native(Expo)学习笔记

开发环境设置

  1. 安装 Node.js LTS版
  2. 在安卓/iOS手机上安装Expo Go应用

开发第一个app

1
2
3
4
npx create-expo-app@latest StickerSmash && cd StickerSmash  # 初始化新的Expo应用程序
# wget https://docs.expo.dev/static/images/tutorial/sticker-smash-assets.zip && unzip sticker-smash-assets.zip && mv sticker-smash-assets/* ./assets/images
npm run reset-project   # 重置项目(删除里面的示例模板代码)
npx expo start  # 开发服务器启动后，用手机上的ExpoGo扫描屏幕上的二维码

一旦它在所有平台上运行，应用程序应该看起来像这样

简单修改app

让我们修改app/index.tsx:

  1. 从react-native导入StyleSheet并创建一个styles对象来定义我们的自定义样式
  2. 向添加值为#25292e的 styles.container.backgroundColor 属性。这会改变背景颜色
  3. 将的默认值替换为“Home Screen”
  4. 向添加值为#fff（白色）的styles.text.color属性以更改文本颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { Text, View,  StyleSheet } from 'react-native';  // add StyleSheet

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home screen</Text>   // add
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',    // add
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});

黑色背景

添加导航

TODO

参考资料