一、App功能介绍：

这个项目的主要功能有：注册、登录、发送验证码、修改用户头像、修改用户信息、调起相机录制或者调起相册选择和上传视频、调起设备的录音功能录制音频、合并音频和视频并生成一个配音的视频、将生成好的视频同步到云端、视频列表页面、视频详情页面可以播放视频、可以对视频进行评论点赞等操作。
具体演示：

多图预警！流量党请谨慎点开！！！

1、初次安装的话，会进入一个轮播图的页面，用来介绍项目的功能

点击“马上体验”按钮进入登录页

2、登录流程

点击“获取验证码”按钮获取验证码

由于短信的服务是付费的，因此为了节约学习成本，就在后台直接返回给前端验证码的信息。
输入验证码后，点击登录，进入App首页

3、查看已经上传的视频

首页是上传过的视频列表，可以点击“喜欢”进行点赞，也可以再次点击取消点赞功能

点击视频进入视频详情页

可以暂停视频的播放，也可以继续。
点击评论框可以对当前视频进行评论：

评论结果会显示在视频详情页下方。

4、生成视频模块

点击下方中间按钮可以进入视频制作页面：

点击“点我上传视频”调出imagePicker插件，可以选择从相册中选择已有视频、也可以直接调用camera现场录制视频：

由于模拟器中没有相机功能，因此无法演示，我们只演示一下“选择已有视频”的流程，点击选择已有视频后，需要调用相册的权限，会事先询问一下，在这里选择OK就行了。

进入到相册后，选择一个视频，点击choose进行压缩上传：

上传视频完成后，进入配音页面

点击中间的麦克风按钮，开始给当前视频配音

录音完成，点击下一步设置视频标题

点击“发布视频”，发布当前视频创意。
image.png

发布成功后，会提示“视频发布成功”，此时，在视频列表页就会多出一条视频，且可以点击进入详情页进行播放。

5、个人账户模块

点击右侧按钮进入“我的账户”页面

点击上方“戳这里换头像”区域，可以调起imagePicker模块，拍摄照片或者从相册中选取图片进行更换头像的操作（具体流程与上传视频类似）：

点击右上方编辑按钮，可以进入编辑页面，设置当前用户的信息

点击“退出登录”，可以退回到登录页面。
以上就是对这个项目功能方面的总体描述。

二、项目代码及目录结构：

代码目录结构

如上图所示，RN项目有android、ios两个文件夹，这两个文件夹放的是原生的代码，除非要引用一些额外的插件，否则我们在开发业务的过程中不要对它们做过多的修改，以免出现问题。
node_modules文件夹是项目所安装的npm依赖
index.js是项目的入口文件
App.js是项目的首页
其中index.js在旧版本的RN框架中是分为index.ios.js、index.android.js两个文件，目前在0.51版本的react-native框架下合并成了index.js。
app文件夹中放的则是该项目的核心业务代码。
下面重点介绍一下app文件夹中的内容：

app文件夹中存放了数个文件夹。
account文件夹存放的是“个人账户页面”、“登录页面”、“初始滑动页面”三个模块
assets文件夹中存放的是项目的静态资源，这里主要是一些图片
common文件夹中的是当前项目的公用函数或者配置文件
creation文件夹存放的是当前项目的“视频列表”和“视频详情”页面
edit文件夹存放的是当前项目的“生成视频”模块

三、具体功能的实现方式

1、初次打开时的轮播图组件的实现：

轮播组件是在初次进入APP时显示的几张轮播引导图，只在安装后第一次打开App时显示，第二次打开就不会再显示了。

当应用初次打开时，进入App.js页面，页面的状态中有一个entered属性，初始的时候，它为false,所以此时默认将Slider渲染出来。 当点击“马上体验”之后，将其设置为true，并且设置持久存储：AsyncStorage.setItem('entered', 'yes') 。此时Slider消失，将App主页显示出来。 当下次再进入页面的时候，先判断AsyncStorage里面的entered字段是不是为“yes”，如果是的话就设置当前state中的entered为true，显示App主页。

轮播图组件应用了react-native-swiper插件，具体插件的用法可以在https://js.coach中查询

2、react-navigation插件的使用

该项目的视频列表页进入视频详情页这一过程使用了react-navigation这个插件。
老版本的react-native的官方插件是：React.Navigator，目前这个插件已经被废弃了，官方目前推荐使用react-navigation插件。
安装

yarn add react-navigation
//或者
npm install --save react-navigation

官方文档
使用demo：

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const params = navigation.state.params || {};

    return {
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
          color="#fff"
        />
      ),
      /* the rest of this config is unchanged */
    };
  };

  /* render function, etc */
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

const MainStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = StackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

3、react-native-image-picker插件的使用

当我们需要调起设备的相册选取相册或者视频时，当我们需要调起相机拍照或者录制视频时需要用到这一插件。

插件官方地址：react-native-image-picker
插件的安装：npm install react-native-image-picker@latest --save
由于该插件需要引用原生的一些东西，所以需要：react-native link
做完以上工作还需要进行手动配置：
ios：
1、In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2、Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj
3、Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
4、For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions. Note: You will get a SIGABRT crash if you don't complete this step

  <dict>
    ...
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
  </dict>
</plist>

android
Add the following lines to android/settings.gradle:

include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')

Update the android build tools version to 2.2.+ in android/build.gradle:

buildscript {
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.+' // <- USE 2.2.+ version
    }
    ...
}
...

Update the gradle version to 2.14.1 in android/gradle/wrapper/gradle-wrapper.properties:

...
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
Add the compile line to the dependencies in android/app/build.gradle:

dependencies {
    compile project(':react-native-image-picker')
}

Add the required permissions in AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
Add the import and link the package in MainApplication.java:

import com.imagepicker.ImagePickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ImagePickerPackage() // <-- add this line
            // OR if you want to customize dialog style
            new ImagePickerPackage(R.style.my_dialog_style)
        );
    }
}

使用方法：

var ImagePicker = require('react-native-image-picker');

// More info on all the options is below in the README...just some common use cases shown here
var options = {
  title: 'Select Avatar',
  customButtons: [
    {name: 'fb', title: 'Choose Photo from Facebook'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info below in README)
 */
ImagePicker.showImagePicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled image picker');
  }
  else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    let source = { uri: response.uri };

    // You can also display the image using data:
    // let source = { uri: 'data:image/jpeg;base64,' + response.data };

    this.setState({
      avatarSource: source
    });
  }
});

Then later, if you want to display this image in your render() method:

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

To Launch the Camera or Image Library directly (skipping the alert dialog) you can do the following:

// Launch Camera:
ImagePicker.launchCamera(options, (response)  => {
  // Same code as in above section!
});

// Open Image Library:
ImagePicker.launchImageLibrary(options, (response)  => {
  // Same code as in above section!
});

4、react-native-audio插件的使用

破坏性升级：
For React Native >= 0.47.2, use v3.4.0 and up.
For React Native >= 0.40, use v3.1.0 up til 3.2.2.
For React Native <= 0.39, use v3.0.0 or lower.

v4.0 introduced a breaking change to the API to introduce distinct pause and resume methods.

v3.x removed playback support in favor of using more mature libraries like react-native-sound. If you need to play from the network, please submit a PR to that project or try react-native-video.

安装：

npm install react-native-audio --save
react-native link react-native-audio

在iOS中需要对Info.plist中增加对麦克风的允许:

<key>NSMicrophoneUsageDescription</key>
<string>This sample uses the microphone to record your speech and convert it to text.</string>

在Android中需要在 AndroidManifest.xml中:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

手动安装：
如果你使用了 react-native link就不需要做以下配置了

Edit android/settings.gradle to declare the project directory:

include ':react-native-audio'
project(':react-native-audio').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio/android')

Edit android/app/build.gradle to declare the project dependency:

dependencies {
  ...
  compile project(':react-native-audio')
}

Edit android/app/src/main/java/.../MainApplication.java to register the native module:

import com.rnim.rn.audio.ReactNativeAudioPackage; // <-- New
...

public class MainApplication extends Application implements ReactApplication {
  ...
  @Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new ReactNativeAudioPackage() // <-- New
    );
  }

使用：

import {AudioRecorder, AudioUtils} from 'react-native-audio';
let audioPath = AudioUtils.DocumentDirectoryPath + '/test.aac';

AudioRecorder.prepareRecordingAtPath(audioPath, {
  SampleRate: 22050,
  Channels: 1,
  AudioQuality: "Low",
  AudioEncoding: "aac"
});