Elm React Native 项目教程
elm-react-nativeA react native app simulating eleme app,run ios and android.项目地址:https://gitcode.com/gh_mirrors/el/elm-react-native
1. 项目的目录结构及介绍
elm-react-native/
├── android/
├── ios/
├── src/
│ ├── components/
│ ├── screens/
│ ├── styles/
│ ├── App.js
│ ├── index.js
├── package.json
├── README.md
android/
和 ios/
目录包含原生 Android 和 iOS 项目的配置文件。src/
目录是项目的主要代码文件夹。
components/
目录包含可重用的 React 组件。screens/
目录包含应用的不同页面或屏幕。styles/
目录包含全局样式和主题文件。App.js
是应用的主入口文件。index.js
是应用的入口文件,负责初始化应用。
package.json
包含项目的依赖和脚本配置。README.md
是项目的说明文档。
2. 项目的启动文件介绍
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
- 该文件是应用的入口文件,负责注册应用的主组件。
AppRegistry.registerComponent
方法将 App
组件注册为应用的根组件。
App.js
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.content}>
<Text style={styles.text}>Welcome to Elm React Native!</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default App;
- 该文件是应用的主组件,定义了应用的布局和样式。
SafeAreaView
确保内容不会被设备刘海或状态栏遮挡。Text
组件显示欢迎文本。
3. 项目的配置文件介绍
package.json
{
"name": "elm-react-native",
"version": "1.0.0",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"react": "17.0.2",
"react-native": "0.66.0"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/runtime": "^7.15.0",
"babel-jest": "^27.2.0",
"jest": "^27.2.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
name
和 version
定义了项目的名称和版本。scripts
定义了可用的脚本命令,如运行 Android 和 iOS 应用。dependencies
和 devDependencies
列出了项目所需的依赖包。jest
配置了测试框架 Jest 的预设。
app.json
{
"name": "ElmReactNative",
"displayName": "ElmReactNative"
}
- 该文件定义了应用的名称和显示名称。
name
是应用的内部名称,displayName
是应用在设备上显示的名称。
elm-react-nativeA react native app simulating eleme app,run ios and android.项目地址:https://gitcode.com/gh_mirrors/el/elm-react-native