# ReactNative安卓快速开发框架

**Repository Path**: liu-jun-jun/ReactNative-Android

## Basic Information

- **Project Name**: ReactNative安卓快速开发框架
- **Description**: ReactNative安卓快速开发框架
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2023-04-19
- **Last Updated**: 2023-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ReactNative安卓快速开发框架

#### 介绍
ReactNative安卓快速开发框架

#### 教程
## 安装 Node.js 和 npm

```
React Native 是基于 Node.js 和 npm 的，因此需要先安装它们。
可以从 Node.js 的官方网站 https://nodejs.org/en/ 下载适合自己操作系统的安装包进行安装。
```

## 安装 React Native CLI

使用 npm 安装 React Native CLI，可以通过以下命令进行安装

```
npm install -g react-native-cli
```

## 创建新项目

使用 React Native CLI 创建新项目，可以通过以下命令进行操作

```
react-native init MyProject
```

## 运行项目

进入新创建的项目目录，可以使用以下命令运行项目：

```
cd MyProject
react-native run-android // 运行 Android 版本
react-native run-ios // 运行 iOS 版本
```

注意，运行 iOS 版本需要在 Mac 上进行操作。

## 编写代码

创建项目后，就可以开始编写 React Native 代码了。可以在项目的 App.js 文件中编写代码，例如

```javascript
import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}
```
## 安装

```javascript
npm install react-native-paper
npm install react-native-safe-area-context
npm install react-native-vector-icons
```

## 配置

```javascript
babel.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },};

```

## node.js闪退

```javascript
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};
不要配置此
```

## 解决办法android

```
android/app/build.gradle


最后一行增加
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
```

## 更多解决办法

[链接](https://github.com/oblador/react-native-vector-icons#android)



#### 特技

React Native Elements：一个 UI 组件库，包含了丰富的可重用组件，如按钮、图标、卡片、列表、输入框等。https://github.com/react-native-elements/react-native-elements

React Native Maps：一个地图组件库，可以在 React Native 应用程序中轻松地使用地图功能。https://github.com/react-native-maps/react-native-maps

React Native Paper：一个 Material Design 风格的 UI 组件库，包含了按钮、卡片、文本框等组件。https://github.com/callstack/react-native-paper

React Native Vector Icons：一个图标库，包含了众多的图标，可以在 React Native 应用程序中使用。https://github.com/oblador/react-native-vector-icons

React Native Gifted Chat：一个聊天组件库，可以在 React Native 应用程序中轻松地实现聊天功能。https://github.com/FaridSafi/react-native-gifted-chat

React Native Animatable：一个动画库，可以在 React Native 应用程序中轻松地实现动画效果。https://github.com/oblador/react-native-animatable

React Native WebView：一个 WebView 组件，用于在 React Native 应用程序中嵌入 Web 内容。https://github.com/react-native-webview/react-native-webview