react native 知识点积累

1. 导入导出

• 导入其他模块成员使用import关键字
• 向外共享模块化成员使用export关键字

  默认导出

  export default 成员对象, 在一个模块里边只能默认导出一次 ```javascript let n1 = 10 //定义模块私有成员 n1 function show (){} //定义模块私有方法 show

export default { //使用export default 默认导出语法，向外共享 n1 和 show 两个成员 n1, show }

<a name="tWTLY"></a>
#### 默认导入 
import 接受名称 from '模块标识符'，接收的名称可以任意命名，只要合法即可。
```javascript
//从01_m1.js 模块中导入export default向外共享的成员
//并使用m1成员进行接收
import m1 from './01_m1.js'
//打印输出的结果为：
//{n1:10, show:[Function:show]}
console.log(m1)

按需导出

export 按需导出的成员

export let s1 = 'aaa'        //向外按需导出变量s1
export let s2 = 'ccc'        //向外按需到处变量s2
export function say(){}    //向外按需导出方法say

按需导入

//导入模块成员
import {s1, s2, say} from './02_m2.js'
console.log(s1)     //打印输出aaa
console.log(s2)     //打印输出ccc
console.log(say)     //打印输出[Function: say]
//可以使用as关键字进行重命名
import {s1 as food} from './02_m2.js
console.log(food) //打印输出aaa

• 每个模块中可以使用多次按需导出
• 按需导入的成员名称必须和按需导出的名称保持一致
• 按需导入时，可以使用as关键字进行重命名
• 按需导入可以和默认导入一起使用

直接导入并执行模块代码

如果只是单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码

for(let i = 0; i<3; i++) {
  console.log(i)
}

//直接导入并执行模块代码，不需要得到模块向外共享的成员
import './03_m3.js'

2. 经纬度

模拟器设置经纬度的方法

启动模拟器，选择头部中的Debug-Location-Custom Location
按照下面的顺序点击 iOS Simulator > Features > Location > Custom Location

导入库

cd  ./项目根目录
yarn add @react-native-community/geolocation

cd ios && pod install && cd ..

import geolocation from '@react-native-community/geolocation';
componentDidMount(){
  //弹出手机所在的位置的经纬度
  //H5中提供了，navigator.geolocation,让我们获取手机坐标
  navigator.geolocation = geolocation;
  navigator.geolocation.getCurrentPosition((pos)=>{
    //这个函数在，获取完这个经纬度之后来执行
    const coords = pos.coords //获取坐标对象
    //弹出经度和维度
    alert(coords.longitude+","+coords.latitude)
  })
}

3. ref

16.3 禁用字符串，正确写法 官方解释 https://reactjs.org/docs/refs-and-the-dom.html

constructor(props){
  super(props)
  this.scrollVRef = React.createRef();
}
componentDidMount(){
  const scrollV = this.scrollVRef.current;
}
render(){
  return(
    <View style = {{marginTop:44}}>
  <ScrollView 
ref={this.scrollVRef}
horizontal 
pagingEnabled
showsHorizontalScrollIndicator={false}//滚动条
  >
  <View style={styles.box}>
  </View>
  </ScrollView>
  </View>
)
}

4. swiper 在外围添加一个盒子，设置高度

5. Image 设置 宽高 才能展示

6.useLayoutEffect

useEffect 的函数会在组件渲染到屏幕之后执行
useLayoutEffect则是在DOM结构更新后、渲染前执行，相当于有一个防抖效果

useEffect
1，click setState （value）
2，虚拟 DOM 设置到真实 DOM 上
3，渲染
4，执行useEffect回调
5，setState（value）
6，虚拟 DOM 设置到真实 DOM 上
7，渲染
一共执行了两次渲染：3和7

useLayoutEffect
1，click setState （value）
2，虚拟 DOM 设置到真实 DOM 上
3，执行useLayEffect回调
4，setState （value）
5，虚拟 DOM 设置到真实 DOM 上
6，渲染
只会进行一次页面渲染

照此看useLayoutEffect比useEffect更好，那么是否可以全部使用前者来代替后者呢？
但官网提到的一些应该注意的点：

1. 应先使用useEffect，若出问题再尝试useLayoutEffect；
2. useLayoutEffect与componentDidMount，componentDidUpdate的调用阶段是一样的；

详细的关于useEffect和useLayoutEffect执行时机，深入理解 React useLayoutEffect 和 useEffect 的执行时机