react-native

init

index.js

//AppRegistry是React Native应用的JS入口
import { AppRegistry } from 'react-native'
//AppRegistry.registerComponent注册应用
AppRegistry.registerComponent(appName, () => App)

hook

• 是一个特殊的函数，复用状态逻辑的方式，不复用state本身
• 可在单个组件中多次调用
• Hook 使用了 JavaScript 的闭包机制
• 可以多次使用useState和useEffect
• 只能在函数最外层调用hook，不要在循环，条件判断或者子函数中调用
• 自定义hook，表单处理、动画、订阅声明、计时器等场景

useState&useEffect

//在react函数组件中添加state的hook
useState//参数是初始state

const [count, setCount] = useState(0)与下面的等价
var countList = useState(0)
var count = countList [0]
var setCount = countList [1]

const [todos, setTodos] = useState([{ text: '123' }])//State 变量可以很好地存储对象和数组
//在函数组件中执行副作用
useEffect//通过跳过Effect进行性能优化
useEffect(() => {
	document.title = `count`
}, 0)//react会将前一次渲染的值和后一次渲染的值进行比较，相等会跳过这个effect

useEffect(() => {
	document.title = `count`
}, [])//只运行一次effect，不依赖props和state中的任何值

hook&class

Hook 使你在非 class 的情况下可以使用更多的 React 特性

• 无需编写class的情况使用state
• 无需需改组件结构的情况下复用状态逻辑
• 将组件中互相关联的部分拆分成更小的函数

import React, { useState, useEffect } from 'react'
//函数组件
//function fn(props) {
const fn = (props) => {
	const [count, setCount] = useState(0)
	useEffect(() => {
		document.title = `count`
	})
	const [isOnline, setIsOnline] = useState(null)
	useEffect(() => {
		ChatAPI.subscribeToFriendStatus(props.frined.id, handleStatusChange)
		return() => {
			ChatAPI.unsubscribeFromFriendStatus(props.frined.id, handleStatusChange)//可以在组件销毁时取消对ChatAPI的订阅
		}
	})
	function handleStatusChange(status) {
		setIsOnline(status.online)
	}
	return (
		<div>
			<p>{count}</p>
			<button onClick={() => setCount(count + 1)}>
				点击
			</button>
		</div>
	)
}

//class组件
class fn extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			count: 0
		}
	}
	render() {
		return (
			<div>
				<p>{this.state.count}</p>
				<button onClick={() => this.setState({ count: this.state.count + 1 })}>
					点击
				</button>
			</div>
		)
	}
}

自定义hook

import React, { useState, useEffect } from 'react'
const useFriendStatus = (friendID) => {
	const [isOnline, setIsOnline] = useState(null)
	function handleStatusChange(status) {
		setIsOnline(status.isOnline)
	}
	useEffect(() => {
		ChatAPI.subscribeToFriendStatus(frinedID, handleStatusChange)
		return() => {
			ChatAPI.unsubscribeFromFriendStatus(frinedID, handleStatusChange)//可以在组件销毁时取消对ChatAPI的订阅
		}
	})
	return isOnline//返回好友是否在线
}

其他hook

useContext//订阅react的context
useReducer//通过reducer管理本地state
useColorScheme//提供和订阅配色方案更新

组件

ImageBackground

<ImageBackground source={require()}></ImageBackground>

图片的resizeMode属性

• contain
• stretch
  填充，图片畸形
• cover
  在显示比例不失真的情况下填充整个显示区域，可放大和缩小，超出部分不显示
• center

TouchableOpacity

封装视图，可以正确响应触摸操作

NavigationActions

import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);

StackActions

import { StackActions, NavigationActions } from "react-navigation"
const resetAction = StackActions.reset({
     index: 1,
     actions: [
        NavigationActions.navigate({ routeName: 'Page1' }), 
        NavigationActions.navigate({ routeName: 'Page3', params: {}})
      ]
});
this.props.navigation.dispatch(resetAction) //导航至Page3，重置路由

Modal

覆盖全屏的模态视图

import { Modal } from "react-native";
export default class UpdateModal extends Component{
    constructor(props){
      super(props)
      this.state = {
          type:1
      }
    }
    render() {
    	return (
    		<Modal
    			animationType = "slide"
                transparent={true}
                visible={this.props.modalVisible}
                onRequestClose={() => {
            		this.setModalVisible(!modalVisible);
          		}}
    		>
    		</Modal>
    	)
    }
}

API

StyleSheet

提供了一种类似 CSS 样式表的抽象

import React from 'react'
import { StyleSheet } from 'react-native'
const styles = StyleSheet.create({})

应用程序接口

Linking

提供了一个通用的接口来与极限和传出的App链接进行交互