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

2023-02-28 17:30:05

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

码农公寓

相关文章