做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】

  • Z时代
  • 2024-01-10
  • 分类：综合

react

前提：从来没有写过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>

四、组件

子组件：

 import React, { Component } from 'react';
 import {
　　Text,
　　View
 } from 'react-native';
 
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安卓应用【从环境安装到应用发布】 的全部内容，
                        来源链接：
                            utcz.com/z/382754.html
回到顶部