react native简单入门

2019-12-05 15:35:03 浏览数 (1)

react基础

　基本组件
代码语言：javascript复制
import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
  }

  componentDidMount() {
    // 数据请求
  }

  componentWillReceiveProps() {
    // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用
  }

  componentWillUnmount() {
    // 销毁长链接等本组件占用资源的操作
  }

  render() {
    // 注意render一个组件
    return (
      <div></div>
    )
  }
}
react生命周期

只执行一次： constructor、componentWillMount、componentDidMount 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时） 不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）

props

组件的属性，可以为任意类型。主要的用途：

父组件向子组件传递数据 父组件向子组件传递调用函数，用来通知父组件消息。 用来作为子组件逻辑判断的标示，渲染的样式等 children用来作为子组件的部分视图。

state

在constructor中初始化该组件的state，之后通过this.setState({})修改state。setState所做的修改是合并修改，意思是setState中的对象会和之前的state做合并。 每次修改完状态后，稍后会执行render重新渲染。

代码语言：javascript复制
import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }

  add() {
    let { count } = this.state;
    count  ;
    this.setState({
      count: count
    });
  }

  sub() {
    let { count } = this.state;
    count--;
    this.setState({
      count: count
    });
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <Button onClick={() => this.add()}>Add</Button>
        <Button onClick={() => this.sub()}>Sub</Button>
      </div>
    )
  }
}

渲染 数据展示 用{}包裹数据

循环

代码语言：javascript复制
{
  [1,2,3,4].map(item => {
    return <div>{item}</div>
  })
}

条件判断

代码语言：javascript复制
{ flag && <div>测试</div>}
{ flag ? <div>测试</div> : <div>测试2</div>}

react native

基本组件介绍

View 相当于html的div，块容器

Image 图片展示组件，常用属性如下：

source source={{uri: "XXX"}} 加载网络图片, 必须设置宽和高才能展示。在展示图片前，最好判断XXX是否存在 source={require("XXX")} 加载本地图片，XXX为本地图片相对地址 应该封装一个Image组件，用来处理onError的错误和网络图片缓存

TouchableOpacity 用于写按钮的组件。常用属性如下：（此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景）

activeOpacity 指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间） onPress TouchableHighlight 用于写按钮的组件，常用属性如下：

activeOpacity 指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间） underlayColor 有触摸操作时显示出来的底层的颜色 onPress Text 显示文字的组件

ellipsizeMode 取值(‘head’, ‘middle’, ‘tail’, ‘clip’)

head：从文本的开头进行截断，并在文本的开头添加省略号，例如：…xyz。 middle ：从文本的中间进行截断，并在文本的中间添加省略号，例如：ab…yz。 tail：从文本的末尾进行截断，并在文本的末尾添加省略号，例如：abcd…。 clip ：文本的末尾显示不下的内容会被截断，并且不添加省略号，clip只适用于iOS平台。 numberOfLines 限制最多显示的行数

onPress

TextInput 输入框组件

value onChangeText underlineColorAndroid="transparent" TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框 placeholder placeholderTextColor onBlur 当文本框失去焦点的时候调用此回调函数。 onFocus 当文本框获得焦点的时候调用此回调函数。 Modal ScrollView horizontal 当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。 showsHorizontalScrollIndicator 当此属性为true的时候，显示一个水平方向的滚动条。 FlatList data 数据 renderItem 每一项的渲染组件 onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用 onEndReachedThreshold 决定当距离内容最底部还有多远时触发onEndReached回调 keyExtractor item的key ref this._list.scrollToOffset({x: 0, y: 0}) Alert StyleSheet 样式定义StyleSheet.create

Dimensions 获取屏幕尺寸 Dimensions.get('window').height Dimensions.get('window').width

布局

flex布局 Flex 布局教程：语法篇 绝对定位 flex布局一般都是对内容组件进行操作。

样式编写

代码语言：javascript复制
<View style={styles.container}></View>
const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

宽/高无单位，这里的1代表的是逻辑像素点

数据请求介绍

在services文件夹中进行定义，在其他页面引用调用。参照SpectrumService的编写。

路由编写

在app.js中定义路由 <NavScenekey="SpectrumSearch"component={GenealogySearch}renderRightButton={props=><GenealogySearchBoxpreKey={props.preKey}/>}/>

key为该路由标识

component 为该路由展示的组件 title为导航栏标题 renderRightButton可重写右侧按钮 导航栏在路由组件中定义

路由跳转

router文件定义了三个跳转方法，jump, jumpRNApp, jumpApp jump代表正常的RN页面之间跳转 jumpRNApp代表RN页面之间需要跨路由，并且重新启动一个RN实例，一般用于首页跳转到其他RN页面 jumpApp代表跳转到原生App的页面

与App的交互

startActivity 跳转到APP某个路由 finishActivity 结束当前RN页面 getUserInfo 获取用户信息 AppEventListener 监听App的调用，包括路由跳转和重新加载 日志记录 通过引入services中的logger，调用其方法进行日志输出。方法有info, debug, warn, error四种，通过logger.error(tag, {})调用，tag为字符串。

调试

通过console.log输出打印，在XCode/android studio控制台查看对应的输出。 通过Alert.alert弹框，进行调试。 rn基本命令介绍 npm start 启动服务 npm run startWithNoCache清空缓存启动服务 npm run build 打包 npm install 依赖安装 npm run reinstall 重新安装依赖 切记不要修改将npm5安装依赖后的package.json文件提交。package.json的依赖记录中不应包含react-native,rn-nodeify,util三项。

项目结构

reactnative

0 人点赞