浅谈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>
    );
  }
}
复制代码