上一篇：使用react native 创建一个属于你自己的云备忘录app~（A。用node搭个服务，基础篇）

项目地址：cloud-memo

效果图

demo

目录结构

初始化那些东西就不赘述了，rn官方文档很详细。

在app目录中新建一个js目录，作为主要部分代码的目录。

-js
 +component 展示型组件
 +container 包含型组件（主要是描述功能的）
 -screen react-navigation的路由目录
    -navigations
        -navOptions.js 设置导航样式
    index.js 配置路由
 -utils 放了一些工具函数
    -px2dp.js 根据设备分辨率转换像素大小
    -request.js
 App.js 主组件，用来把路由连接到这里

文本编辑器

构造组件部分没有什么难点，主要是在编写文本编辑器上，在github上找了不少插件大部分都是富文本且都是通过webview构建的，反而太过臃肿，于是只能自己亲自操刀了OVO。

效果展示

demo

为了实现一边输入一边增加行高，用TextInput上的apionContentSizeChange

 <TextInput
          style={[{ height: inputBoxHeight }, style.inputBox]}
          multiline // 代表可以输入多行
          defaultValue="可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行"
          onContentSizeChange={this.onChange}
        />

绑定函数onChange

onChange(event) {
    const contentSize = event.nativeEvent.contentSize.height;
    this.setState({
      inputBoxHeight: contentSize,
    });
  }

这样写出来的效果并不流畅，每次换行时会闪烁。这时加入动画起到一个过渡作用。

onChange(event) {
    const contentSize = event.nativeEvent.contentSize.height;
    Animated.timing(
      this.state.inputBoxHeight,
      {
        toValue: contentSize,
      },
    ).start();
  }
  
  ...
  
   <Animated.View style={{ height: inputBoxHeight }}>
         <TextInput
            style={[{ flex: 1 }, style.inputBox]}
            multiline // 代表可以输入多行
            defaultValue="可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行可以输入多行"
            onContentSizeChange={this.onChange}
            underlineColorAndroid="transparent"
        />
    </Animated.View>

导航

我用的是react-navigation来设置导航。

配置导航栏样式

// navOptions.js
export default function navOptions(title = '', restParams = {}, isShowHeader = true) {
  if (!isShowHeader) return { header: null };
  return {
    title,
    headerTitle: (
      <View style={styles.header}>
        <Text style={{ fontSize: px2dp(25) }}>
          {title}
        </Text>
      </View>),
    headerLeft: (restParams && restParams.headerLeft) || <View />,
    headerRight: (restParams && restParams.headerRight) || <View />,
  };
}

主要是返回一个配置对象，包含导航名，导航栏左右按钮等，详见官方文档。

配置路由

export default {
  List: {
    screen: List,
    navigationOptions: () => navOptions(''),
  },
  Detail: {
    screen: Detail,
    navigationOptions: ({ navigation }) => navOptions(
      '编辑',
      { headerLeft: <BackBtn navigation={navigation} /> },
    ),
  },
};

通知组件

安装组件

在android下，react native自身提供了ToastAndroid；而在IOS中，需要安装react-native-root-toast。

统一API

这里需要自己简单封装一下

// Toast.js
import { ToastAndroid, Platform } from 'react-native';
import RootToast from 'react-native-root-toast';

const Toast = Platform.select({
  ios: RootToast,
  android: ToastAndroid,
});

export { Toast };

调用方法

Toast.show('提示内容',Toast.SHORT);

临时示例

编辑后，提示用户已保存到本地

demo

处理网络请求

我们使用基于promise的axios来处理请求，先安装依赖，再按照上篇文章的数据返回格式封装一下request函数：

import axios from 'axios';
import createError from './createError';

export default function request(url, body) {
  return axios
    .post(`http://192.168.10.248:8888${url}`, JSON.stringify(body))
    .then(response => response.data)
    .then((response) => {
      if (response.status === 1) throw createError(response.code);
      return response.body || {};
    })
    .catch((error) => {
      if (error instanceof SyntaxError) {
        throw createError('SYNTAX_JSON');
      }
      // JSON解析错误
      /* eslint-disable no-console */
      console.log(error);
      throw createError('ERROR');
    });
}

上传按钮的动画

写这个组件费了一点心思，主要因为它是在navigator上，并非是detail组件。要通过上传状态更改这个组件的旋转动画的状态，通过props传递太过复杂，也不好实现。这里用DeviceEmitter来解决这个问题。

效果图

demo

Upload按钮组件

const TIMES = 30;

export default class UploadBtn extends React.Component {
  static uploadEvent() {
    DeviceEventEmitter.emit('uploading', true);
  }

  constructor(props) {
    super(props);
    this.state = {
      rotateValue: new Animated.Value(0),
    };
    this.stopAnimate = this.stopAnimate.bind(this);
    this.startAnimate = this.startAnimate.bind(this);
  }

  componentDidMount() {
    this.deEmitter = DeviceEventEmitter.addListener('isUploaded', (a) => {
      if (a) {
        setTimeout(() => {
          this.stopAnimate();
        }, 1000);
      }
    });
  }

  componentWillUnmount() {
    this.deEmitter.remove();
  }

  startAnimate() {
    UploadBtn.uploadEvent();
    Toast.show('上传中...', 5000);

    Animated.timing(this.state.rotateValue, {
      toValue: 360 * TIMES,
      duration: 800 * TIMES,
      easing: Easing.linear,
    }).start();// 开始spring动画
  }

  stopAnimate() {
    this.state.rotateValue.stopAnimation(() => {
      Toast.show('上传完成', Toast.SHORT);
    });
    this.state.rotateValue.setValue(0);
  }

  render() {
    return (
      <Animated.View style={{
        transform: [{ rotate: this.state.rotateValue.interpolate({ inputRange: [0, 360], outputRange: ['0deg', '360deg'] }) }],
        }}
      >
        <NavBtn onPress={this.startAnimate} iconName="refresh" />
      </Animated.View>
    );
  }
}

这里主要是设计思路比较麻烦，代码上没有什么特别大的坑，只有在接受isUploaded信号，停止动画那里，有些异步的问题，旋转动画无法正常停止，后来加了个定时器就解决了。

本地存储

react native使用AsyncStorage来操作本地数据，返回的都是promise，所以是异步的，不过也有同步函数，不在这里详细介绍了。

按照官方api进行简单封装，如下：

async function getStorageData(key) {
  let value;
  try {
    value = await AsyncStorage.getItem(key);
  } catch (e) {
    throw e;
  }
  return value;
}

async function getStorageAllData(keys) {
  let data;
  try {
    data = await AsyncStorage.multiGet(keys);
  } catch (e) {
    throw e;
  }
  return data;
}

async function setStorage(arr) {
  try {
    await AsyncStorage.multiSet(arr);
  } catch (e) {
    throw e;
  }
}

export { getStorageData, getStorageAllData, setStorage };

总结

最后加上首页导航栏，组件的构建基本上就完成了；下一篇内容将会细化server端接口，联调接口，部署服务器，app端打包等，最终完成一个真正的应用。