ReactNative►第一章：ReactNative入门

第3节：ReactNative的最基础知识

[TOC]

一、基础

1、Import与export

参考文章：ES6 export 和 export default的区别

1.1、知识储备

  • export 和 export default的区别
导出方式 使用方式
export 用户必须需要知道所要加载的变量名，否则无法加载。
export default 但是用户肯定不愿意去阅读子组件看看导出名称叫啥，然后回来导入。所以就有了 export default。
  • {} 和 没{} 的区别

当import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

1.2、import使用示例

  • 当使用的是export，而不是export default的时候
1
2
3
4
5
// 使用方式1：常规方法
import { Greeting } from "./src/greeting";

//使用方式2：如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名
import { bieming as Greeting } from "./src/greeting";
  • 当使用的是export default的时候

可以用任意名称指向greeting.js输出的方法，这时就不需要知道原模块输出的变量名。

1
2
// 使用export default的时候可以有如下写法
import AnyName from "./src/greeting";

需要注意的是，这时import命令后面，不使用大括号。常见于export default createAppContainer(UIHomeNavigation);

2、颜色与图片资源

3、View样式属性

参考文章：

4、组件的属性添加及隐藏

需求距离：日期连接符，根据参数来判断是用直线还是波浪线。

定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class DateConnectView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showWave: true
        };
    }

    render() {
        let dateConnectView = this.props.showWave ?
            <View
                style={{width: 20, height: 1, backgroundColor: "black"}}
            />
            :
            <View
                style={{width: 20, height: 1, backgroundColor: "black"}}
            />


        return (
            <View>
                {dateConnectView}
            </View>

        )
    }
}

调用的时候：

1
<DateConnectView showWave={false} />

二、bind

ES5语法React.createClass会自动绑定this,ES6的写法,不再自动绑定this。

参考文章：

如果需要传参数，则采用箭头函数的写法。

三、常见问题

1、使用Class类出现的问题

1.1、View config not found for name完美解决方法

出现的原因是return的内容内组件的首字母不是大写，比如如果提示View config not found for name abc，则只需将abc换成Abc即可解决。

1.2、Only one default export allowed per module

export default class声明的类只能有一个，并且被引用的类要符合执行顺序

所以，请检查export default class 是不是太多了。

1.3、Module does not exist in the module map

Module does not exist in the module map 即
在Haste模块映射中或在这些映射中不存在，一般存在于对同一级目录的引用 

1
2
3
import ButtonFactory from 'cjdemobuttonfactory'		// 错误
// 改为下面即可
import ButtonFactory from './cjdemobuttonfactory' // 正确

2、使用Text问题

2.1、Text文字的垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
<Text style={{
    flex: 1,
    height: 44,
    lineHeight:44,	//添加这行即可使得Text文字垂直居中显示
    textAlign: "center",
    backgroundColor: "red",
    color: '#5C5C5C',
    fontSize: 15,
}}
>
"我是文字"
</Text>

3、使用列表 FlatList/SectionList 出现的问题

3.1、keyExtractor

VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

它警告我们每个item 要有不同的key 。默认情况下每行都需要提供一个不重复的key属性。你也可以提供一个keyExtractor函数来生成key。

1
2
3
4
5
6
7
8
9
10
<FlatList
 keyExtractor={(item, index) => index.toString()}	//不能缺少
/>  

// keyExtractor也可以用方法写
keyExtractor = {this._extraUniqueKey}   

_extraUniqueKey(item ,index){
      return "index"+index+item;
}

3.2、virtualizedCell.cellKey

Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.

1
2
3
keyExtractor={(item, index) => index}						//会有警告⚠️
// 修改成如下：
keyExtractor={(item, index) => index.toString()}//成功

4、使用导航问题

TypeError: undefined is not an object (evaluating ‘this.props.navigation.navigate’)

检查下是不是导航栏不是在该类，而是在其他类上。常见于你在子组件中调用了该属性而发生错误。

举例：https://stackoverflow.com/questions/48446821/typeerror-undefined-is-not-an-object-evaluating-this-props-navigation-navigate

  • 问：怎么判断导航栏是否为空？
  • 答：

5、引用资源遇到的问题

Metro Bundler has encountered an internal error, please check your terminal error output for more details

可能原因：路径出错，如下：

1
2
3
icon:require('../image/home_n.png'),
//改成正确的路径后，问题解决
icon:require('./image/home_n.png'),

四、第三方库

1、添加库

1
2
3
4
cd xxx
npm install antd --save
npm install antd-mobile --save
npm install @ant-design/react-native --save