npm install -g expo-cli

expo init AwesomeProject

cd AwesomeProject
expo start

// 容器组件，相当于 <div></div>，
// 但是对于内容超出容器高度的情况是不能滚动的
// 默认使用 flexbox 布局
<View />
// 可滚动的容器组件，
// 一次会渲染所有节点，适合数据不多的滚动
<ScrollView />
// 可滚动的容器组件，
// 懒加载结点，适合长列表
<FlatList />
  
// 文本组件，负责展示文本。
// 注意在 RN 中，文本必须被 Text 组件包裹
<Text>文本</Text>

// 按钮，按钮的文本通过 title 属性赋值。
// 此外，RN 中点击事件是 onPress 而不是 onClick。
<Button
  onPress={onPressHandler}
  title="按钮"
/>
    
// 输入框
<TextInput
  onChangeText={onChangeText}
  value={text}
/>
    
// 图片，本地图片使用 require 引入，网络图片通过 uri 属性引入
<Image source={require('./img/check.png')} />
<Image 
  source={{uri: 'https://reactjs.org/logo-og.png'}}
  style={{width: 400, height: 400}
/>

// 1.透明效果
<TouchableOpacity
  onPress={onPress}
>
  <Text>文本</Text>
</TouchableOpacity>

// 2.高亮
<TouchableHighlight onPress={onPress}>
  <View>
    <Text>文本</Text>
  </View>
</TouchableHighlight>

// 3.原生的反馈
<TouchableNativeFeedback
  onPress={() => {
    setRippleColor(randomHexColor());
    setRippleOverflow(!rippleOverflow);
  }}
  background={TouchableNativeFeedback.Ripple(rippleColor, rippleOverflow)}
>
  <View>
    <Text>文本</Text>
  </View>
</TouchableNativeFeedback>

// 4.无反馈
<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;

// 官方的例子
import React from "react";
import { StyleSheet, Text, View } from "react-native";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>React Native</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default App;

const styles = StyleSheet.create({
  card: {
    padding: 20,
    backgroundColor: "white",
    borderRadius: 10,
	
    // 安卓实现 View 阴影样式
    elevation: 8,

    // iOS 实现 View 阴影样式
    shadowColor: "black",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
  },
});

<TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
	// ...
</TouchableWithoutFeedback>

Alert.alert(
  "Alert 标题",
  "Alert 内容信息",
  // 按钮组，可以定义按钮样式与回调函数
  [
    {
      text: "取消",
      onPress: () => console.log("Cancel Pressed"),
      style: "cancel"
    },
    { text: "确认", onPress: () => console.log("OK Pressed") }
  ]
);

expo install expo-font

import { useFonts } from 'expo-font';

// ...
const [loaded] = useFonts({
  Montserrat: require('./assets/fonts/Montserrat.ttf'),
});
// ...

import Ionicons from '@expo/vector-icons/Ionicons';

export default function App() {
  return (
    <View style={styles.container}>
  	  // name 的取值可以去 https://icons.expo.fyi/ 这个网站查
      <Ionicons name="md-checkmark-circle" size={32} color="green" />
    </View>
  );
}

// 可以试试 expo 官网指南中提到的几个 UI 库
// https://docs.expo.dev/guides/userinterface/

import {
  useWindowDimensions,
  Dimensions,
  SafeAreaView
} from 'react-native';

// 1
// 获取设备像素信息
// 这里的 height width 是响应式的，会随着屏幕尺寸改变而改变
const { height, width } = useWindowDimensions();

// 2
// 监听屏幕方向变化
Dimensions.addEventListener("change", ({ window, screen }) => {})

// 3
// SafeAreaView 组件提供通用的安全显示区域，防止刘海屏遮挡屏幕内容
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>内容</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

// 4
// KeyboardAvoidingView
// 可以防止软键盘遮挡输入区
const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View>
          <Text>Header</Text>
          <TextInput placeholder="Username" />
          <View>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

import { Platform, StyleSheet } from 'react-native';

// 获取当前操作系统名称
console.log(Platform.OS); // enum('android', 'ios')

// 使用 .select() 方法来获取类似 switch 的功能
const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      android: {
        backgroundColor: 'green'
      },
      ios: {
        backgroundColor: 'red'
      },
      default: {
        // other platforms, web for example
        backgroundColor: 'blue'
      }
    })
  }
});

BigButton.ios.js
BigButton.android.js

import BigButton from './BigButton';

{
  "expo": {
    // ...
    // 一共有三种取值 default, portrait, landscape
    // 默认为 default， 不限制转向
    // portrait 时，限制程序为纵向
    // landscape 时，限制程序为横向
    "orientation": "portrait",
    // ...
  }
}

import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator,
  createSwitchNavigator,
} from "react-navigation";

// Stack
const StackNavigator = createStackNavigator({
  Xxx: XxxScreen,
  // ...
});

// BottomTab
const BottomTabNavigator = createBottomTabNavigator({
  Xxx: XxxScreen,
  Xxx2: {
    screen: Xxx2Screen,
    navigationOptions: {
      // 通过这个属性设置 Tab 的 icon
      tabBarIcon: (tabInfo) => <Ionicons name="ios-restaurant" size={25} />,
    },
  },
  // ...
});

// Drawer
const DrawerNavigator = createDrawerNavigator({
  Xxx: XxxScreen,
  // ...
});

// Switch
const SwitchNavigator = createSwitchNavigator({
  Main: BottomTabNavigator,
  Auth: AuthScreen,
});

// 最后通过 createAppContainer 方法创建导航入口
export default createAppContainer(SwitchNavigator);

class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>This is the home screen of the app</Text>
        <Button
      	  // 第一个参数是目的路由的名称，就是创建导航类型时，自己定义的名称
      	  // 第二个参数是传递的参数 params
      	  // 在目标页面，通过 props.navigation.getParam('name') 获取参数值
          onPress={() => navigate('Profile', { name: 'Brent' })}
          title="Go to Brent's profile"
        />
      </View>
    );
  }
}

ScreenComponent.navigationOptions = (navData) => ({
  // HeaderBar 标题
  headerTitle: "HeaderBar 标题!",
  // HeaderBar 样式
  headerStyle: {
    backgroundColor: "orange",
  },
  // HeaderBar 文本颜色
  headerTintColor: "white",
});

// 官方例子，createStackNavigator 方法第二个参数来同一配置 NavigationOptions
const HomeStack = createStackNavigator({ A }, {
  // 组件的 .navigationOptions 配置可以覆盖这里的配置
  defaultNavigationOptions: {
    title: 'Welcome'
  }
})

import { Ionicons } from "@expo/vector-icons";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
// ...
const CustomHeaderButton = (props) => {
  return <HeaderButton {...props} IconComponent={Ionicons} iconSize={23} />;
};

CategoriesScreen.navigationOptions = (navData) => ({
  headerTitle: "HeaderBar 标题!",
  headerStyle: {
    backgroundColor: "orange",
  },
  headerTintColor: "white",
  headerLeft: (
    <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
      <Item
        title="Favorite"
        iconName="ios-menu"
        onPress={() => {
          navData.navigation.toggleDrawer();
        }}
      />
    </HeaderButtons>
  ),
});

// 官方例子

import { AsyncStorage } from 'react-native';

// 存数据
_storeData = async () => {
  try {
    await AsyncStorage.setItem(
      '@MySuperStore:key',
      'I like to save it.'
    );
  } catch (error) {
    // Error saving data
  }
};

// 取数据
_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

expo install expo-image-picker

import * as ImagePicker from 'expo-image-picker';

// ...

const [status, requestPermission] = ImagePicker.useCameraPermissions();

const pickImage = async () => {
  // status.granted 为当前是否有相机权限
  if (!status.granted) {
    // 没有权限就要请求权限
    await requestPermission();
  }
};

// ...

const result = await ImagePicker.launchCameraAsync();

// ImagePicker.launchImageLibraryAsync 方法还可以接收一个对象，来配置选中的图片
let result = await ImagePicker.launchImageLibraryAsync({
   mediaTypes: ImagePicker.MediaTypeOptions.All,
   allowsEditing: true,
   aspect: [4, 3],
   quality: 1,
});

expo install expo-file-system

import * as FileSystem from 'expo-file-system';

// 获取 App 可写的文件夹 uri，以 file:// 开头
console.log(FileSystem.documentDirectory);

FileSystem.moveAsync({
	from: 'file://xxx1',
    to: 'file://xxx2'
})

expo install expo-sqlite

// 引入模块
import * as SQLite from "expo-sqlite";

// 打开/创建数据库
// 数据库地址 ${FileSystem.documentDirectory}/SQLite/${name}
const db = SQLite.openDatabase("rn-demo");

// 初始化数据库
export const initDB = () => {
  return new Promise((res, rej) => {
    // 执行事务
    db.transaction((tx) => {
      // 执行sql
      tx.executeSql(
        `CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY NOT NULL, name VARCHAR)`,
        [],
        () => res(),
        (_, err) => rej(err)
      );
    });
  });
};

// 增加用户
export const insertUser = () => {
  return new Promise((res, rej) => {
    db.transaction((tx) => {
      tx.executeSql(
        `INSERT INTO users (name) VALUES (?)`,
        ["lyf"],
        (_, ret) => {
          res(ret);
        },
        (_, err) => {
          rej(err);
        }
      );
    });
  });
};

// 获取用户列表
export const getUser = () => {
  return new Promise((res, rej) => {
    db.transaction((tx) => {
      tx.executeSql(
        `SELECT * FROM users`,
        [],
        (_, ret) => {
          res(ret);
        },
        (_, err) => {
          rej(err);
        }
      );
    });
  });
};

expo install expo-location

// 引入模块
import * as Location from "expo-location";

const handleGetCurrentLocationBtnClick = async () => {
  // 请求位置权限
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== "granted") {
    setErrorMsg("获取位置权限被拒绝！");
    return;
  }

  // 获取设备当前位置信息
  let location = await Location.getCurrentPositionAsync({});
  console.log(location);
};

npm i react-native-maps

import React from "react";
// 还记得 RN 中这些组件都有什么用吗?
import { View, Text, StyleSheet, Button, Dimensions } from "react-native";
// 引入组件
import MapView from "react-native-maps";

const MapViewContainer = (props) => {
  return (
    <View>
      <MapView
        style={styles.map}
		// 初始定位
        initialRegion={{
          // 经纬度值，可以通过
          // 获取设备位置信息(Location.getCurrentPositionAsync)
          // 的返回值 location.coords 中获得
          latitude: 37.78825,	// location.coords.latitude
          longitude: -122.4324,	// location.coords.longitude
                       
          // 下列两个属性是经纬度缩放比例
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  map: {
    width: Dimensions.get("window").width,
    height: 300,
  },
});

export default MapViewContainer;

// React Native CLI 环境搭建官方文档地址：https://reactnative.dev/docs/environment-setup

yarn add react-native-image-picker

# RN >= 0.60，咪咪写这篇文章时，RN 最新稳定版是 0.69
cd ios && pod install

# RN < 0.60，视频中的方法
react-native link react-native-image-picker

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<key>NSPhotoLibraryUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to save photos</string>
<key>NSCameraUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to access your camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Give $(PRODUCT_NAME) permission to use your microphone</string>

import {
  launchCamera, 
  launchImageLibrary
} from 'react-native-image-picker';

expo publish

npm install @react-navigation/native@5
# 或
yarn add @react-navigation/native@5

// 官方示例
// App.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

expo install expo-notifications

import React, { useEffect } from "react";
import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";

import * as Notifications from "expo-notifications";

// 获取当前通知权限信息
async function allowsNotificationsAsync() {
  const settings = await Notifications.getPermissionsAsync();
  return (
    settings.granted ||
    settings.ios?.status === Notifications.IosAuthorizationStatus.PROVISIONAL
  );
}

// 请求通知权限
async function requestPermissionsAsync() {
  return await Notifications.requestPermissionsAsync({
    ios: {
      allowAlert: true,
      allowBadge: true,
      allowSound: true,
      allowAnnouncements: true,
    },
  });
}

// Screen
const NotificationScreen = (props) => {
  useEffect(() => {
    allowsNotificationsAsync().then((res) => {
      if (!res) {
        requestPermissionsAsync();
      }
    });
  }, []);

  return (
    <SafeAreaView>
      <Text>NotificationScreen</Text>
    </SafeAreaView>
  );
};

export default NotificationScreen;

const triggerNotificationHandler = () => {
    Notifications.scheduleNotificationAsync({
      content: {
        title: "一个通知",
        body: "我是通知body",
      },
      trigger: {
        // 3 秒后通知
        seconds: 3,
      },
    });
  };

 import * as Notifications from "expo-notifications";

// ...

useEffect(() => {
    // 在后台监听通知，用户点击通知后，才会触发回掉函数
    const backSubscription = Notifications.addNotificationResponseReceivedListener(response => {
      console.log('backSubscription ', response);
    });

    // 前台监听通知事件
    const foreheadSubscription = Notifications.addNotificationReceivedListener(
      (notification) => {
        console.log('foreheadSubscription ', notification);
      }
    );
    return () => {
      backSubscription.remove()
      foreheadSubscription.remove()
    };
  }, []);

// ...