做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】
前提:从来没有写过android 跟 ios 应用,是一个小前端。前一段时间玩了一下 react-native 感觉还不错,应用代码还未开源。
环境: win7
成果:
一、安装
1、SDK安装
提示: 安装需通过代理,不然会很慢哟~~
安装 android studio 安装2.0的版本
在studio中安装以下SDK
添加环境变量(变量值为sdk路径):
2、全局 react-native 安装
npm install -g react-native-cli
3、测试安装
选一个文件夹,在文件夹下面运行
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
第一行创建一个 react-native 项目,
第三行 android工程中gradle的依赖关系会去先编译node_modules下RN的代码,并加入自己的工程中。
这个时候要是没有弹出打包的弹窗,可以手动触发
cd AwesomeProject
react-native start
打包 react-native
这个时候,可以看到项目的目录
其中 index.android.js 就是我们的入口文件
我们可以在这里目录下找到我们需要用到的apk
把 apk 在 android 手机上安装。
首次打开app 我们需要设置热更新的地址,通过摇一摇手机,把开发菜单摇出来。 点击 Dev Settings 设置开发
Debugging 调试
手机与电脑需要在同一网络下,并且填上电脑的地址,端口号默认是8081
点击确认之后,我们就可以回到页面上,在开发菜单上点击 reload 就可以看到
首次打包我们需要稍等一下
接下来我们只需要在这个基础上修改 index.android.js 这个文件就可以啦。
因为react-native 本身的设计就是ios跟android公用一套代码,那么这里我们可以使用统一的入口文件 main.js
4、统一入口文件
文件目录
main.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import Nav from './component/Nav';function render() {
return (
<Provider>
<Nav />
</Provider>
);
} export default render;
index.android.js
import { AppRegistry } from 'react-native';
import main from './main'; AppRegistry.registerComponent('AwesomeProject', () => main);
二、React-Native 标签
react-native中的标签跟web页面的不同,所有标签的第一个字母都为大写,跟react 的组件相似、每个标签只能做一定的东西,某些标签一定需要被包裹、某些标签不能单独使用,具体可以看文档。
使用标签前需要引入标签
import {
Text,
View,
StyleSheet,
TouchableHighlight,
Linking,
Alert
} from 'react-native';
三、Reac-Native 样式
react-native中的样式除了一部分特殊样式之外,大多数样式为css中的驼峰式写法。react-native支持Flexbox布局
1、 样式与标签分离的写法,相当于web页面中css与标签分离
样式:
var styles = StyleSheet.create({
child: {
paddingVertical: 15,
marginHorizontal: 10,
borderColor: '#f6f6f6',
borderBottomWidth: 1,
flexDirection: 'row'
},
key: {
paddingHorizontal: 10,
width: 50,
},
name: {
flex: 5,
flexDirection: 'row',
alignItems: 'center',
}
})
在标签中的引用:
<View style = { styles.child }>
<Text style = { styles.key }>关键</Text>
<View style ={ styles.name }>
<Text>react-native</Text>
</View>
</View>
2、直接写在标签中
<View style = {{flexDirection: 'row'}}>
<Text style = {{ width: 50, color:'#999' }}>react-native</Text>
</View>
四、组件
子组件:
class Child extends Component {
render() {
return (
<View>
<Text>{ this.props.name }</Text>
</View>
)
}
} export default Child;
父组件:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import Child from './Child'; class Father extends Component {
render() {
return (
<View>
<Child name= {'Mickey'}/>
</View>
)
}
} export default Fatcher;
五、使用 redux 管理数据
1、redux 目录
2、新建action (reducers/preview.js)
var previewInitState = {
previewList: []
};
3、新建子reducer (reducers/preview.js)
export default function (state = previewInitState, action) { switch (action.type) { case 'GET_FOLDER':
return {...state, previewList: action.previewList}; default:
return state;
} }
4、合并所有reducer (reducers/index.js)
import { combineReducers } from 'redux';
import previewReducer from './preview';var reducers = combineReducers({
previewReducer: previewReducer
}); export default reducers
5、新建store (store/index.js)
import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers' var store = createStore(
reducers,
compose(
applyMiddleware(thunk)
)
) export default store;
这样子我们就可以再react-native中使用 redux 啦
6、在入口文件 main.js 中引入 store
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import stores from './redux/store';
import Nav from './component/Nav';
const store = stores; function render() {
return (
<Provider store = { store }>
<Nav />
</Provider>
);
} store.subscribe(function(){
render();
}); export default render
subscribe 函数为监听 store 的变化,当store变化的时候,组件相应地更新
7、在组件中使用store
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Child from './Child';
import store from '../redux/store'
import {
Text,
ListView,
StyleSheet
} from 'react-native'; class Father extends Component { constructor(props){
super(props);
var { previewList } = this.props; fetch(config.url +'/getAllPreview', {
method: 'GET'
})
.then((response) => {
return response.json();// 转换为JSON
})
.then((data) => {
store.dispatch({
type: 'GET_FOLDER',
previewList: data.previewList
})
})
.catch((error) => {
console.error(error)
})
}
render() {
var { previewList, dispatch } = this.props;
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(previewList)
}
if (previewList < 1) {
return (
<Text></Text>
)
}
return (
<ListView
dataSource = { this.state.dataSource }
renderRow = {(rowData) => <Child folder = { rowData }/>}
></ListView>
);
}
} const mapStateToProps = (state) => {
return {
previewList: state.previewReducer.previewList,
}
} const mapDispatchToProps = (dispatch, ownProps) => {
return {}
} export default connect(
mapStateToProps,
mapDispatchToProps
)(Father);
上面代码中的 store.dispatch 方法为 把从后台请求过来的数据跟新到 store 去 。
mapStateToProps 方法 则是把 state 复制到组件的 props 中。
上面使用了 react-native 中的一个 ListView 标签
接下来我们就可以愉快地编码了。
六、发布release 版本
开发版本的 程序性能跟 发布版本的会相差比较大,不要因为开发版本性能不好而放弃react-native哟~发布版本的还是挺顺畅的。
1、生成密匙库
使用命令行生成:
在JDK的bin目录下面打开控制台,输入
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
接下来要在控制台上填写好所有信息等
或者我们也可以在 android studio 中生成
打开 android studio,打开任意一个 android 项目 选择 build 下面的 Generate Signed APK...
填写密匙库生成的路径、我这里把密匙库放在桌面
点击 create new 填写好密匙库的资料。
填写完之后 点击 ok 再点击 next,弹出这个 摁 finish
完成之后,我们可以在桌面上找到密匙库 meiqi.jks
2、在项目中使用密匙库
把密匙库放在这个目录下面
打开这个文件
在文件的后面追加我们所生成的密匙库的信息
android.useDeprecatedNdk=true
MYAPP_RELEASE_STORE_FILE=meiqi.jks
MYAPP_RELEASE_KEY_ALIAS=mickey
MYAPP_RELEASE_STORE_PASSWORD=****** //密匙库密码
MYAPP_RELEASE_KEY_PASSWORD=****** //密匙库密码
打开这个文件
在文件上面添加
...
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
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
3、发布 release 的 apk 文件
cd android && ./gradlew assembleRelease
这时候我们就可以看到 目录下多出了 两个release 的apk ,这个时候我们只需要把apk发送到手机,并安装就可以使用啦。
但是,这个时候,我们的应用还是很丑的绿色安卓图标,这时候我们需要把我们产品的logo放上去,并且修改应用的名称。
七、修改应用名称、logo
1、 修改应用名称
打开文件
<resources>
<string name="app_name">应用名称</string>
</resources>
2、 修改应用的logo
打开到这个目录
只需要把下面的图片更换成为我们需要的logo即可,四个文件夹分别对应四张不同大小的图片
一个完整的 纯 react-native 的 android 应用就完成啦。
转载请注明出处 http://www.cnblogs.com/Miss-mickey/p/6699535.html
做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】的更多相关文章
- 做一个完整的Java Web项目需要掌握的技能[转]
转自:http://blog.csdn.net/JasonLiuLJX/article/details/51494048 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小项目 ...
- 做一个完整的Java Web项目需要掌握的技能
最近自己做了几个JavaWeb项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收获,列举出在做项目的整个过程中,所需要用到的技能和知识点,带给还没有真正接触过完整Java Web项 ...
- 做一个完整的Hadoop项目
1. 完整的数据流图 由同ip访问的次数: SQL查询 select ip,count(ip) from tablename Group by ip; 基于Hadoop分析 使用Hadoop分析,需 ...
- react native 安卓打包--mac环境,如果打包不成功可注意下my-release-key.keystore的位置关系(绝对路径)
// my-release-key.keystore和my-key-alias都是可修改的名称 1.生成签名密钥(keytool -genkey -v -keystore my-release-key ...
- SpringBoot系列之三_一个完整的MVC案例
这一节让我们来做一个完整的案例. 我们将使用MyBatis作为ORM框架,并以非常简单的方式来使用MyBatis,完成一个完整的MVC案例. 此案例承接上一节,请先搭建好上一节案例. 一.数据库准备 ...
- 如何做一个像btbook.net这样的搜片神器?
这几天btbook.net这个搜片神器网站火了, 让我这个无工作的人, 也想做一个出来, 不然时间不好打发, 本人的草稿站: fastbot.me (刚发布几个小时, 体验等几天再做) 现在说说这种搜 ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- react实例之todo,做一个实时响应的列表操作
react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...
随机推荐
- Redis实战与 Session缓存
C#操作Redis的库有很多,比如C# Redis Client就很好用, 在NuGet上搜索 ServiceStack.Redis 安装到项目中,将会添加以下引用 ServiceStack.Red ...
- 关于fibonacci数列用JS写的一点小优化
直接上代码 var month = prompt("请输入月数:") function fibobo(x) { //先定义一个已有前两项的数组,用来作缓存 var arr = [1 ...
- Android学习总结(一)——Activity的基本概念与Activity的生命周期
一.Activity的基本概念 Activity是Android的四大组件之一,它是一种可以包含用户界面的组件,主要用于和用户进行交互,比如打电话,照相,发送邮件,或者显示一个地图!Activity用 ...
- 前端总结·基础篇·JS(一)五大数据类型之字符串(String)
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...
- Linux使用小笔记<安装篇>
问题一:在windows下删除ubuntu并修复引导windows启动. 1. 下载MBRFix工具,放在c盘,利用命令提示符,进入软件所在目录,cd c:\mbrfix 2.输入 MBRFix /d ...
- .NET基础笔记(C#)
闲着没事就把以前学习时的笔记拿出来整理了一下,个人感觉有点用,就想拿出来跟园友共享一下.有些基础性的内容比如基本概念.语法什么的就不发了. 内容:1.构造方法(函数) 2.继承 3.访问修饰符 ...
- SQLServer存储过程实现单条件分页
SQLServer Procedure Pagination_basic: ALTER PROCEDURE [qiancheng].[Pagination_basic] ( ), --name of ...
- 算法模板——Tarjan强连通分量
功能:输入一个N个点,M条单向边的有向图,求出此图全部的强连通分量 原理:tarjan算法(百度百科传送门),大致思想是时间戳与最近可追溯点 这个玩意不仅仅是求强连通分量那么简单,而且对于一个有环的有 ...
- 关于xml中有特珠字符而导致XmlDocument无法Load的处理
这是个小事故导致的... 我们线上有个节目里名称里(`F`H9)MSTJXCX0B3J69,虽然我们看到是(`F`H9)MSTJXCX0B3J69,但百思不得其解,发现每次在XmlDocument.L ...
- 吃透css3之3d属性--perspective和transform
本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...