阅读 205

浅谈React Native之实战篇

这是我参与 8 月更文挑战的第 19 天,活动详情查看: 8月更文挑战

前言

我们都知道,通过React Native可以实现编写一套代码,直接多端运行。本篇文章将以实战为主,内容主要包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

环境搭建

首先,我们确保本地已安装好node环境,为了快速上手,我们使用官方推荐的脚手架工具create-react-native-app

npm install -g create-react-native-app # 全局安装脚手架工具

create-react-native-app AwesomeProject # 创建示例项目

cd AwesomeProject
npm start # 运行
复制代码

执行到了这部,我们就可以通过控制台的二维码,扫描访问啦~

应用开发

React Native的编码模式和react很像,我们来对比下两者的区别:

React代码:

import React, { Component } from 'react';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <div>
          <span>Hello world!</span>
        </div>
    );
  }
}
复制代码

React Native代码:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View>
          <Text>Hello world!</Text>
        </View>
    );
  }
}
复制代码

我们发现,标签需要通过引入react-native提供的组件,其实这点也不难理解,毕竟React Native最后会转换成对应平台的原生组件。

Props

使用方法和react类似,我们来看一下图片组件的示例:

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'http:'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}
复制代码

Flexbox布局

在写react的代码的时候,我们通常使用CSS进行排版布局,但是在多平台多设备的场景下,React Native为我们提供了Flexbox布局,我们通过flexbox规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说,使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。这和CSS中的flex布局有点类似,有过flex布局经验的同学对于这块的上手门槛会比较低。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};
复制代码

长列表

在移动端,性能和体验是比较重要的,React Native提供了几个适用于展示长列表数据的组件,一般而言我们会选用FlatList或是SectionList。

  • FlatList组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。
  • FlatList更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,FlatList并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}
复制代码

列表控件的性能会优于我们自己实现的组件,因为在移动端的场景中,会考虑展示条目、加载性能、列表回弹等诸多因素。

小结

本篇文章为笔者结合了React Native的实践经验,涉及的知识面会比较基础,带大家有个整体的认知,在下篇文章中,会基于一些总结和个人理解,聊聊React Native的原理,包括运行原理、渲染原理。

文章分类
前端
文章标签