React-Navigation 5.X 学习记录（一）------ StackNavigator 篇

安装

react-navigation 5 将各个导航部分独立出来了，安装需要一个一个安装。

// 安装react-navigation
yarn add @react-navigation/native
// 安装依赖库
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
// 安装stack导航
yarn add @react-navigation/stack

StackNavigator 使用

StackNavigatiot：一次只渲染一个页面，并提供页面之间跳转的方法。当打开一个新的页面时，它被放置在堆栈的顶部。
createStackNavigator是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。Navigator和Screen作为其子元素来定义路由的配置。

NavigationContainer是管理导航树幷包含导航状态的组件。该组件必须包装所有导航器结构。通常，我们会在应用程序的根目录下渲染此组件，通常是从导出的组件App.js。

// In App.js in a new project

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>
  );
}
function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}
const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      // 可以在navigator 定义一些初始信息
      <Stack.Navigator initialRouteName="Home">
      	// screen 接受两个参数，name对应相应的component
        <Stack.Screen name="Home" component={HomeScreen} />
        // 可以为Screen定义一些options选项,例如title为呈现的标题
        <Stack.Screen 
        	name="Details" 
        	component={DetailsScreen}
        	options={{ title: 'Overview' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

页面跳转与传值

有以下跳转方式：
1. navigation.navigate(name) 跳转到特定的路由，如果队列里有此路由，不会再队列里添加
2. navigation.push(name) 跳转到特定路由,不会判断现有队列里是否存在此路由,直接添加
3. navigation.pop() 出栈
4. navigation.goBack() 返回
5. navigation.popToTop() 跳转到队列里的第一个路由
6. navigation.setParams() 在调用SetParams时，路由器将产生一个新的状态
7. navigation.replace() 用新的route替换当前的route
8. navigation.reset() 重置，将重置整个导航状态并将其替换为新的导航。
9. navigation.dispatch() 向路由发送 action
在跳转时可以传递一些参数，供下个路由使用，下个屏幕以route.params的方式获取参数。请参考以下示例，HomeScreen跳转到DetailsScreen并传递了一些参数，DetailsScreen里通过route获取这些参数。在定义stack.screen时，也可以传递一些默认的参数，通过initialParams定义。

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. 跳转并传递参数 */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  /* 2. 获取参数 */
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      /* 使用参数 */
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

配置选项

通过上述代码，你可以对stackNavigator有一个大致的了解。下面是Stack可用选项的信息。

Stack.Navigator的配置选项
1. initialRouteName
  首次加载名称
2. screenOptions
  屏幕的默认选项。如下示例。
```
<Stack.Navigator
initialRouteName="Page1"     //作为初始化页面、不写的话默认第一个screen为初始化页面
screenOptions={{                 //用来定制头部信息、根据自己需要更改
  title: '测试标题',
  headerStyle: {
    backgroundColor: '#ee7530'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize: 20
  }
}}>
```
3. keyboardHandlingEnabled
  如果为false，则导航到新屏幕时，屏幕键盘不会自动关闭。默认为true
4. mode
  定义渲染和过渡的样式
  card：使用标准的iOS和Android屏幕过渡。这是默认值.
  modal：这有两件事：设置headerMode到screen堆栈，除非指定使屏幕从iOS底部的底部滑入，这是一种常见的iOS模式.
5. headerMode
  指定标题的呈现方式
  float：渲染停留在顶部的单个标题，并在更改屏幕时进行动画处理。iOS上的常见模式。
  screen：每个屏幕都有一个附加的标题，标题随屏幕一起淡入和淡出。Android上的常见模式。
  none ：没有标题。
Stack.Screen的配置选项
- options
  可用于配置导航器内的各个屏幕
  1. title
    头部标题
```
function StackScreen() {
  return (
  	//  静态值
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
      // 动态获取
      <Stack.Screen
        name="Profile"
        component={HomeScreen}
        options={({ route }) => ({ title: route.params.name })}
      />
    </Stack.Navigator>
  );
}
/* 在组件中修改使用setOptions */
	<Button
	  title="Update the title"
	  onPress={() => navigation.setOptions({ title: 'Updated!' })}
	/>
```
  2. header
    函数，返回一个React Element，显示为标题。如下示例。
```
	header: ({ scene, previous, navigation }) => {
		  const { options } = scene.descriptor;
		  const title =
		    options.headerTitle !== undefined
		      ? options.headerTitle
		      : options.title !== undefined
		      ? options.title
		      : scene.route.name;
		
		  return (
		    <MyHeader
		      title={title}
		      leftButton={
		        previous ? <MyBackButton onPress={navigation.goBack} /> : undefined
		      }
		      style={options.headerStyle}
		    />
		  );
		};
```
  3. headerShown
    是显示还是隐藏屏幕标题。默认情况下显示标题，除非将headerMode其设置为none。设置为 false隐藏标题。在特定屏幕上隐藏标题时，您可能还需要将headerModeprop 设置为screen。
  4. headerTitle
    字符串或返回标头要使用的React元素的函数。默认为 title 选项值.
```
function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}
```
  5. headerTitleAlign
    对齐标题。可选择left或center。默认为iOS-center和Android-left
  6. headerTitleAllowFontScaling
    标头标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
  7. headerBackAllowFontScaling
    后退按钮标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。
  8. headerBackImage
    该函数返回一个React Element以在标题的后退按钮中显示自定义图像。使用函数时，它将tintColor在其参数对象中接收。默认为带有背面图像源的Image组件，它是平台的默认背面图标图像（iOS上为人字形，Android上为箭头）。
  9. headerBackTitle
    iOS上的后退按钮使用的标题字符串。默认为上一个场景的headerTitle。
  10. headerBackTitleVisible
    为后退按钮标题是否可见提供了一个合理的默认值，但是如果您想覆盖它，则可以使用true或false在此选项中使用
  11. headerTruncatedBackTitle
    当headerBackTitle屏幕上不适合显示后退按钮时使用的标题字符串。"Back"默认情况下。
  12. headerRight
    该函数返回一个React元素以显示在标题的右侧。
```
function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}
```
  13. headerLeft
    返回React元素以显示在标题左侧的函数。使用函数时onPress，在呈现时它会接收许多参数（label，labelStyle和more-检查types.tsx以获取完整列表）。
  14. headerStyle
    标头的样式对象。例如，您可以在此处指定自定义背景色。
  15. headerTitleStyle
    标题组件的样式对象
  16. headerBackTitleStyle
    标题的样式对象
  17. headerLeftContainerStyle
    自定义headerLeft组件容器的样式，例如添加填充。
  18. headerRightContainerStyle
    自定义headerRight组件容器的样式，例如添加填充。
  19. headerTitleContainerStyle
    自定义headerTitle组件容器的样式，例如添加填充。默认情况下，headerTitleContainerStyle是具有绝对位置的风格和偏移量都left和right。这可能导致的空白或之间重叠headerLeft和headerTitle如果定制headerLeft被使用。可以通过在中和中进行调整left和right样式来解决。headerTitleContainerStylemarginHorizontalheaderTitleStyle
  20. headerTintColor
    标头的色调颜色
  21. headerPressColorAndroid
    材料波纹的颜色（仅适用于Android> = 5.0）
  22. headerTransparent
    默认为false。如果为true，则标题将没有背景，除非您明确为其提供背景headerBackground。标头也将浮动在屏幕上，使其与下面的内容重叠。
  23. headerBackground
    返回React元素以呈现为标题背景的函数。这对于使用背景（例如图像或渐变）很有用。
    例如，可以将其headerTransparent用于渲染模糊视图以创建半透明标题。参考下述示例.
```
import { BlurView } from 'expo-blur';
<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerTransparent: true,
    headerBackground: () => (
      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
    ),
  }}
/>;
```
  24. headerStatusBarHeight
    在标题顶部添加额外的填充以说明半透明的状态栏。默认情况下，它使用设备安全区域插图中的最大值。传递0或自定义值以禁用默认行为，并自定义高度。
  25. cardShadowEnabled
    使用此道具在过渡期间具有可见的阴影。默认为true。
  26. cardOverlayEnabled
    使用此道具可以在过渡期间在卡下看到半透明的深色覆盖层。默认为trueAndroid和falseiOS。
  27. cardStyle
    堆栈中卡的样式对象。您可以在此处提供自定义背景色，以代替默认背景。您还可以指定{ backgroundColor: ‘transparent’ }使前一个屏幕在下面可见（对于透明模式）。这对于实现模态对话框之类的东西很有用。mode: 'modal’使用透明背景时，还应该在堆栈视图配置中指定，这样以前的屏幕就不会分离并且在下面保持可见。
  28. animationEnabled
    屏幕上是否应启用过渡动画。如果将其设置为false，则按下或弹出时屏幕不会动画。默认为true。
  29. animationTypeForReplace
    当此屏幕替换另一个屏幕时要使用的动画类型。它采用以下值：
    push -将使用推送新屏幕的动画
    pop -将使用弹出屏幕的动画
    默认为push。
    当pop被使用时，pop动画被施加到被替换的画面。
  30. gestureEnabled
    是否可以使用手势关闭此屏幕。默认为trueiOS，falseAndroid。
  31. gestureResponseDistance
    从屏幕边缘开始覆盖触摸距离的对象，以识别手势。该对象可以包含以下属性：
    horizontal- 数字 -水平方向的距离。默认为25。
    vertical- 数字 -垂直方向的距离。默认值为135。
  32. gestureVelocityImpact
    决定手势速度相关性的数字。默认值为0.3。
  33. gestureDirection
    手势的方向。与动画有关
  34. transitionSpec
    屏幕过渡的配置对象。与动画有关.请点击此处查看
  35. cardStyleInterpolator
    插卡各部分的插补样式。与动画有关请点击此处查看
  36. headerStyleInterpolator
    标头各部分的内插样式。与动画有关请点击此处查看
  37. safeAreaInsets
    屏幕的安全区域插图。这用于避免使用诸如缺口和状态栏之类的元素。默认情况下，将自动检测设备的安全区域插图。您可以使用此选项覆盖行为。接受包含以下可选属性的对象：
    top- 数字 -顶部插图的值，例如包含状态栏和槽口的区域。
    right- 数字 -左插图的值。
    bottom- 数字 -顶部插图的值，例如底部的区域导航栏。
    left。- 数字 -右插图的值。
动画部分请点击此处查看

React-Navigation 5.X 学习记录（一）------ StackNavigator 篇

安装

StackNavigator 使用

页面跳转与传值

配置选项

工作中用到的脚本合集

24-5-18 X

react-native 使用 code-push 熱更新

React-Native 寫的 android 應用

CodePush 熱更新之自定義更新彈框及下載進度

Vue源碼分析（一）--- 響應式原理

CodePush熱更新常用命令

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結