CS571 W9/10 React Native1/2 HW7/8 笔记

1. React Native 基本常识

1.与安卓设备连接

安卓下载 Expo，使用 USB 连接电脑，打开手机ADB调试。

在 Console 里输入 npm start 以后戳 a 在安卓设备上运行。如果提示 SDK 版本太低检查一下有没有 npm install

2. React Native 的组件

React Native 组件在不同的平台上会被翻译成不同的组件。

React Native 没有 HTML/DOM CSS 的概念。因此 p 标签与 CSS 表等熟悉的概念不再适用。

对于样式，我们使用JS样式表。通过StyleSheet.create从一个 JS Object 中创建一个样式表。示例代码如下：

import {StyleSheet,Text} from 'react-native'
const styles=StyleSheet.create({
    p:{
        fontSize:16
    },
    container:{
        flex:1,
        justifyContent:'center',
        backgroundColor:'green'
    }
})
<Text style={styles.p}>这是一个虚假的p标签</Text>
<Text style={[styles.p,styles.thm]}>使用多个样式的方法</Text>

然后列举一些 RN 组件和对应的 React 组件。

React 组件	RN 组件	使用例	备注
/
			相对屏幕固定
			可滚动的内容
			style 参数内必须显式指定图片长宽，source 是一个 JS Object ，其中的连接是 uri 并不是 url
			Button 必须指定标题！而不是把标题文本夹在标签中间,按压触发是 onPress 不是 onClick！
			开关，使用受控组件维护

3. 分平台的组件

如果有些组件（例如）只有在安卓/iOS 平台上有？

import {Platform} from "react-native"

if (Platform.OS === 'android') 
    return <Component_android/>
 else return <Component_iOS/>

4. 获取屏幕大小

import {Dimensios} from "react-native"

const getScreenSize = () => {
    const screenWidth = Math.round(Dimensions.get('window').width);
    const screenHeight = Math.round(Dimensions.get('window').height);
    return { screenWidth: screenWidth, screenHeight: screenHeight };
  } 

在大型项目中，建议使用 useMemo 来固定 getScreenSize 函数。

2. React Navigation

1. 什么是React Navigation？

之前的课程使用 React Router 进行导航。

简要来说，React Navigation 是基于 Screen 的概念，因此更适合移动端导航。React Router 基于 path 适用于网页端导航：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Layout/>} >
    	<Route path="index" element={<Home/>}/>
        <Route path="about-us" element={<AboutUs/>}/>
        <Route path="*" element={<NoneExist/>}/>
    </Route>
  </Routes>
</BrowserRouter>

两者的共同之处在于把网页/手机 App 页屏视为 React 组件。

2. React Navigation 的三种形式

• Tab Navigation 屏幕底部的导航栏
• Drawer Navigation 是一个可收纳的导航栏
• Stack Navigation 是一个存放页面的栈，通过返回键来 pop

代码示例(Tab Navigation)：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const BadgerSocialTabs = createBottomTabNavigator();


export default function App() {
  return (
    <NavigationContainer>
      <BadgerSocialTabs.Navigator >
        <BadgerSocialTabs.Screen name="NewsFeed" component={NewsFeedScreen} options={{headerShown: false}}/>
        <BadgerSocialTabs.Screen name="Notifications" component={NotificationScreen}/>
        <BadgerSocialTabs.Screen name="AboutMe" component={AboutMeScreen} options={{title: "Profile"}}/>
      </BadgerSocialTabs.Navigator>
    </NavigationContainer>
  );
}

最外层使用 NavigationContainer 包裹，BadgerSocialTabs 是一个利用createBottomTabNavigator 制作出来的组件对象。外层是<.Navigator> 内层是 <.Screen>

name 是导航的标签，component 表示要导航去的组件。

options 选项内可以使用title指定显示的标题，或是用 headerShown:false 来取消显示标题。

3. 导航嵌套&Stack Navigator

上面的代码，NewsFeedScreen 组件里边还可以放一个导航。（例如一个Stack Navigation 表示看的新闻卡片）

注意 NavigationContainer 不能嵌套！所以在 NewsFeedScreen 组件里边放的是Navigator-Screen 两层结构。

import { createNativeStackNavigator } from "@react-navigation/native-stack";

import NewsFeedScreen from '../NewsFeedScreen';
import NewsFeedDetailScreen from '../NewsFeedDetailScreen';

const NewsStack = createNativeStackNavigator();

function NewsFeedStack() {
  return (
      <NewsStack.Navigator>
        <NewsStack.Screen name="AllPosts" component={NewsFeedScreen} options={{headerShown: false}}/>
        <NewsStack.Screen name="SpecificPost" component={NewsFeedDetailScreen} options={{headerShown: false}}/>
      </NewsStack.Navigator>
  );
}

对于 Stack Navigation 的理解：Navigator 内部的 Screen 们可以视为一个 map，在 name 和 component 间建立联系。

使用跳转：

先使用：const navigation=useNavigation()

再使用：navigation.push(screenName,params)

screenName 是那个 Screen 的 name，而不是 component 名字。

params 表示要传进那个组件里边的 props。

在组件中调用 props：props.route.params

3. 待补

1. Flexbox？

2. Linking