react Native 0.63.1React Native加载原理。 react Native 最终输出到index

最新版本Simulattor(14.0)对最新版本react Native 0.63.1 Image 组件不显示。 13.5一下的可以正常显示。

AwesomeProject ······················ 项目文件
├── _test_ ······························ 测试文件夹
│   └── App-test.js ························ 测试文件
├── android ····························· android配置目录
│   └── app ················· 入口文件
├── ios ······················· ios文件夹
│   └── AwesomeProject.xcworkspace ..... 启动文件夹
└── README.md ························· 简答题答案以及说明

React Native加载原理。

react Native 最终输出到index.js里面.
目光转移到index.js上面。

// react-Native输出一个注册类组件。
import {AppRegistry} from 'react-native';
// 我们使用react 写的组件。
import App from './App';
// app.json项目name配置文件。
import {name as appName} from './app.json';
/**
* 注册类组件接收两个参数。
* 一个app.json 配置的文件name。
* 另一个是由App组件组成的回调函数。
*/ 
AppRegistry.registerComponent(appName, () => App);

分析ios配置文件目录 IOS -> 自己项目的名字(name) -> name/name/AppDelegate.m

总结：app.js组件汇总文件。最终输出到index.js文件为工程入口文件。 android 和 IOS 通过桥接文件去加载根视图。找到对应的模块。

react native 规则

不管组件中不管用没有用到react 。都必须引入否则会报错。
当我们开发是的时候，需要调用一些原生组件都是通过： react-native 引入。
其他使用基本和react JSX语法一样。
没有单位他会根据屏幕分辨率自动分布
样式可以写成直联样式。
也可以通过一个变量接收StyleSheet.create({....})来创建你想要的样式。
调试IOS control键 + comment键打开调试器。

react Native 尺寸和运行平台

flex 布局

1. felxDirection : row | row-reverse | column | column-reverse
* 该属性决定主轴的方向。 （即项目的排列方向）
* row: 主轴为水平方向， 起点在左端。
* row-reverse: 主轴为水平方向， 起点在右端。
* column(默认): 主轴为垂直方向，起点在上沿。
* column-reverse: 主轴为垂直方向。起点在下沿。
2. justifyContent: flex-start | center | space-between | space-around
* 定义了伸缩项目在主轴的对齐方式。
* flex-start（默认值）： 伸缩项目向一行的起始位置靠齐。
* flex-end： 伸缩项目向一行的末尾位置对齐。
* center: 伸缩项目向一行的中间位置对齐。
* space-between：两端对齐。 项目之间的间隔都相等。
* space-around： 伸缩项目会分布在行里。两端保留一半的空间。

获取当前设备的尺寸。

在react Native 中导入 Dimensions

<Text>
      当前屏幕的宽度： {Dimensions.get('window').width + '\n'}
      当前屏幕的高度： {Dimensions.get('window').height + '\n'}
      当前屏幕的分辨率： {Dimensions.get('window').scale + '\n'}
</Text>

当前运行平台。在react Native 中导入 Dimensions.可以根据这个值来判断是什么平台，根据平台来做相应的处理。

<Text>
    当前运行平台： {Platform.OS}
 </Text>

常用组件

View：属于容器组件。只能用于组件嵌套。
Text：文本必须写在Text,否则报错。会自动换行。设置行数（numberOflines = {3}）更多功能请查找APi.
Image: 凡是uri: 加载必须设置高度和宽度。
ImageBackground作为背景图片。可以作为容器。
Textinput 边框必须设置宽度不然没有颜色。multiline多行输入。
一般用TouchableOpacity进行封装按钮 Button在IOS是白色。
ScrollView 组件滚动视图水平方向horizontal：true; 滚动, 数据多的话滚动会卡顿。
FlatList 适合做滚动列表。它里面根据key做优化了，做了重用机制，优化性能。
官方推荐使用fetch来获取数据。我们也可以用axios来获取。

安装 react-navigation

初始化项目：在项目的根目录下面运行以下命令。

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

已经创建项目

yarn add react-navigation
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens@^1.0.0-alpha.23

IOS 安装完之后

cd ios/
// 安装react-navigation需要的插件连接起来
pod install
cd ../

为了完成 react-native-srceens 在 android 上的安装，请在android/app/build/build.gradle中dependencies选项添加这两行。

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlaout:1.1.0-alpha02'

运行报错：因为东西安装少了导致：

yarn add react-navigation-stack
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view

cd ios/
// 安装react-navigation需要的插件连接起来
pod install
cd ../

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
// import LKWineList from '../components/LKWineList.js';
import LKNet from '../components/LKNet.js';
class HomeScreen extends Component {
  static navigationOptions = {
    title: '首页',
  };
  constructor() {
    super();
  }

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}
class DetailsScreen extends Component {
  static navigationOptions = {
    title: '详情页',
  };
  constructor() {
    super();
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'red',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Details</Text>
      </View>
    );
  }
}
// createStackNavigator创建一个容器将所以跳转的组件放到在这个容器里面
const AppNavigator = createStackNavigator({
  home: HomeScreen,
  my: MyScreen,
});
// 将这个容器放到createAppContainer里面
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

屏幕切换

// 会判断栈中有没有这个组件，如果有则回到那个页面，如果没有则创建一个新的组件压入栈中展示
this.props.navigation.navigate("组件路由的名字") 
// 创建一个新的组件，进行压栈展示
this.props.navigation.push("组件路由的名字")
// goBack 返回上一个页面
this.props.navigation.goBack("组件路由的名字")
// 回到首页组件
this.props.navigation.popToTop("组件路由的名字")

实例：页面之间参数传递

// 传递
this.props.navigation.push('Details', {
              newId: 'lk001',
              newName: '阿森纳可能撒开',
              newTag: '奥斯卡',
            }
// 参数单个接收
const {navigation} = this.props;
<Text>详情页</Text>
<Text>ID: {navigation.getParam('newId')}</Text>
<Text>标题: {navigation.getParam('newTag')}</Text>
<Text>名称: {navigation.getParam('newName')}</Text>
// 参数整体获取
<Text>名称: {navigation.state.params}</Text>

路由参数具体配置：

createStackNavigator({
  //对于可以导航到的每个屏幕，创建一个新的条目，如下所示：
  Profile: {
    //`ProfileScreen`是一个React组件，它将成为屏幕的主要内容。
    screen: ProfileScreen,
    //当StackNavigator加载`ProfileScreen`时，将为其提供`navigation`道具。

    //可选：在网络应用中进行深层链接或使用react-navigation时，将使用以下路径：
    path: 'people/:name',
    //从路径中提取动作和路线参数。

    //可选：覆盖屏幕的`navigationOptions`
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

页面头部title自定义搜索： Configuring the header bar

// 自定义title

static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 30,
    },
    headerLeft: () => <Button title="设置" onPress={() => alert('设置')} />,
    headerRight: () => (
      <Button title="扫一扫" onPress={() => alert('扫一扫')} />
    ),
  };

动态标题

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

底部导航栏

yarn add react-navigation-tabs

官网 www.reactnavigation.org/docs/zh-Hans/switch-navigator.html

react Native 0.63.1