1.搭建环境
react-native必须的依赖有Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。安装Android Studio时，一定要科学上网，不让你会发现根本没办法继续。（Node 的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本））
java环境报错，和weex不一样的时，react-native打包依赖java编译环境，也就是javac，如果你只安装啦java没有安装javac那就在安装一下吧，安装完之后，有可能会报一个找不到tools.jar文件，这个文件只有javac这个安装目录里面有，复制出来放到java的lib里面就OK啦。
2.运行
运行的话必须要有一个模拟器，你可以下载一个模拟器，也可以使用Android Studio打开一个模拟器，使用
react-native run-android
在设备上运行，现在你应该就运行了这个项目啦。只需要手动修改代码，在模拟器中双击R就可以进行刷新啦。
3.打包APK
react-native打包APK，必须要一个签名密钥，（没有也可以打包，但是不能安装），打开命令行
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
在JAVA的bin目录里面执行，否则你会看到没有keytool命令（你也可以把java bin配置环境变量）
这句话的意思是密钥库里生成了一个单独的密钥，有效期为 10000 天。它会让你做一些配置配置会生成一个my-release-key.keystore文件（这个配置不能写中文！！！，会配置2个密码）生成之后记住你输入的密码，把这个文件放到RN目录android中的APP里面。然后在android里面的gradle.properties文件里面写
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=**** //你刚写的密码
MYAPP_RELEASE_KEY_PASSWORD= **** //你刚写的密码
修改android/app/build.gradle文件signingConfigs里面的release这个字段和buildTypes里面的release 添加字段
def enableProguardInReleaseBuilds = true
android {
...
defaultConfig {
....
}
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}}
splits {
....
}
buildTypes {
release {
signingConfig signingConfigs.release
...
}
}
.....
}
}
}
}
然后在android目录下跑
gradlew assembleRelease
image.png
4.echatrs图表打包无效
在node_modules里面找到natives-echarts包下的tpl.html文件，复制到android的assets下面，修改index.js的引用方式（没有这个文件建一个）
image.png
image.png
image.png
5.RN跳转导航
react-navigation很多博客都写的是老版本的使用方法，在新版本中没有这个StackNavigator全部换成createStackNavigator暴露出去方法必须要createAppContainer执行一个这个
import React from 'react';
import {Text,View,Button} from 'react-native';
import Login from './../login/login';
//坑 新版本 不支持StackNavigator全部换成createStackNavigator
import { createStackNavigator,createAppContainer } from 'react-navigation';
// import ThreeScreen from './Three.js';
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Chat with Lucy</Text>
<Button
onPress={() => navigate('Three')}
title="to to ThreeScreen"
/>
</View>
);
}
}
const Board = createStackNavigator({
Login: { screen: Login },
Chat: { screen: ChatScreen },
// Three: { screen: ThreeScreen},
},
{//定义配置
initialRouteName: 'Login', //设置初始路由为Home
}
);
export default createAppContainer(Board);
APPjs直接渲染
import React from 'react';
import Board from './route/route';
export default class App extends React.Component {
render() {
return <Board />;
}
}
但是很多情况下他会报一个
undefined is not an object evaluation 'RNGestureHandlerModule.State
这样的错误怎么解决呢
1.删除node_modules和package-lock.json
2.npm install
3.npm install --save react-navigation
4.npm install --save react-native-gesture-handler
5.react-native link
6.添加gif图片
默认情况下 Android 是不支持 GIF 和 WebP 格式的。你需要在android/app/build.gradle文件中根据需要手动添加以下模块：
dependencies {
// 如果你需要支持Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:1.10.0'
// 如果你需要支持GIF动图
compile 'com.facebook.fresco:animated-gif:1.10.0'
// 如果你需要支持WebP格式，包括WebP动图
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'
// 如果只需要支持WebP格式而不需要动图
compile 'com.facebook.fresco:webpsupport:1.10.0'
}
从新启动一下就好啦。
7.隐藏导航的顶部标题栏
navigationOptions:{
header:null,
}
8.React native android端webview中文乱码解决
<WebView style={{ width: width - 60, height: 310 * KAdaptionHeight }}
scalesPageToFit={isTrue}
bounces={false}
source={{ html: content.content }}// 部分机子出现乱码
<WebView style={{ width: width - 60, height: 310 * KAdaptionHeight }}
scalesPageToFit={isTrue}
bounces={false}
source={{ html: content.content, baseUrl: '' }}// baseUrl: ''中文乱码解决
9.WebView向RN通信
//页面写法
<View style={S.container}>
<WebView
originWhitelist={['*']}
source={{ html:this.state.data,baseUrl: '' }} //baseUrl解决乱码问题
javaScriptEnabled={true}
domStorageEnabled={true}
scalesPageToFit={true}
startInLoadingState={true}
injectedJavaScript ={HTML}
onMessage={(event) => this.onMessageaa(event)}
/>
{/* <Histogram></Histogram> */}
</View>
//方法
onMessageaa(event){
//注意这个一定要event.nativeEvent.data，负责会报错
ToastAndroid.showWithGravity(event.nativeEvent.data, ToastAndroid.LONG,ToastAndroid.CENTER);
}
//injectedJavaScript ={HTML} 代码 不要用ES6语法
const HTML = `
var currentPosition=0,timer;
timer = setInterval(function(){
currentPosition+=5;
if(currentPosition < document.body.scrollHeight)
{
window.scrollTo(0,currentPosition);
}
else
{
window.postMessage('currentPosition');
window.clearInterval(timer);
window.scrollTo(0,document.body.scrollHeight);
currentPosition = 0;
window.scrollTo(0,currentPosition);
}
},10)
`;
10.RN向WebView通信
//RN里面写
this.refs.webView.postMessage("你要传的值");
//HTML里面写
document.addEventListener('message', function(msg) {}）
11.echart渐变
网页版的echart渐变，RN中没有echarts这个对象所以不行
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(234, 243, 253)'
}, {
offset: 1,
color: 'rgb(255, 255, 255)'
}])
}
}
我们可以使用另一种方法
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#A3C7F3' // 0% 处的颜色
}, {
offset: 1, color: '#FFFFFF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
origin:'start'
}
网友评论