在线预览 学习 前端 移动跨平台框架ReactNative目录结构【03】

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-ReactNative目录结构 04-ReactNative视图View 05-ReactNative组件样式style 06-ReactNative文本组件Text 07-ReactNative组件状态state 08-ReactNative组件属性props 09-ReactNative输入组件TextInput 10-ReactNative图片组件Image 11-ReactNative活动指示器组件 12-ReactNative弹出框Alert 13-ReactNative存储数据组件AsyncStorage 14-ReactNative动画组件Animated 15-ReactNative开关组件Switch 16-状态栏组件StatusBar 17-ReactNative滚动视图ScrollView 18-ReactNative选择器Picker 19-ReactNative网络请求

React Native 目录结构

我们来看看刚刚创建的项目。

一个新的 React Native 项目，根目录下的文件和目录结构如下

└── hello

├── App.js

├── __tests__

├── android

├── app.json

├── babel.config.js

├── index.js

├── ios

├── metro.config.js

├── node_modules

├── package.json

├── package-lock.json

└── yarn.lock

4 directories, 8 files

总共有 4 个目录和 8 个文件。

├── babel.config.js

├── node_modules

├── package-lock.json

├── package.json

└── yarn.lock

这 4 个文件和 1 个目录想必大家都清楚了，不做介绍了。 ├── metro.config.js

这个是 FaceBook 的工程构件文件，这个不需要做任何修改，我们基本也没机会修改它。 ├── android

├── ios

这两个目录是 React Native 原生组件和其它需要原生代码的目录。包含了该项目 iOS 和 Android 平台下所有的原生代码。 一般情况下，我们不需要对这两个目录做任何修改，如果需要修改，我们也会特别指出。 ├── __tests__

这个目录是测试文件目录。如果你要进行单元测试，可以将测试代码放在这个目录下。 ├── App.js

├── app.json

├── index.js

整个项目中，最重要的就是这三个文件

文件说明App.js项目的实际 React Native 源码，主要是存放入口组件 App 的源码app.json项目的配置文件index.js项目的入口文件，如果需要全局加载和全局配置，可以把代码写在这里

app.json

app.json 是项目的配置文件，存放了一些公共的配置项。

新创建的项目，app.json 内容如下

{

"name": "hello",

"displayName": "hello"

}

属性说明name用于配置项目的名称displayName用于配制生成 iOS 和 Android 项目时的显示名称，也就是桌面上图标下面的名称。

index.js

index.js 是项目的入口文件，一些初始化的加载和初始化配置都放在这里。

新创建的项目，index.js 内容如下

/**

* @format

*/

import {AppRegistry} from 'react-native';

import App from './App';

import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

代码很简单，就是加载 App.js 中的 App 组件，然后使用 AppRegistry.registerComponent() 函数注册组件和初始化。

一般情况下，如果需要全局加载和全局配置，可以把代码写在这里

App.js

App.js 是项目的实际 React Native 源码，主要是存放入口组件 App 。

新创建的项目，App.js 内容如下

/**

* Sample React Native App

* https://github.com/facebook/react-native

*

* @format

* @flow

*/

import React, {Fragment} from 'react';

import {

SafeAreaView,

StyleSheet,

ScrollView,

View,

Text,

StatusBar,

} from 'react-native';

import {

Header,

LearnMoreLinks,

Colors,

DebugInstructions,

ReloadInstructions,

} from 'react-native/Libraries/NewAppScreen';

const App = () => {

return (

contentInsetAdjustmentBehavior="automatic"

style={styles.scrollView}>