一、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时显示，第二次打开就不会再显示了。
当点击“马上体验”之后，将其设置为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"
});
网友评论