开源项目 react-native-iShiWuPai 使用教程

开源项目 react-native-iShiWuPai 使用教程

react-native-iShiWuPai🍔一个基于 React Native 和 Redux、MobX 实现的展示型 Demo。项目地址:https://gitcode.com/gh_mirrors/re/react-native-iShiWuPai

1. 项目的目录结构及介绍

react-native-iShiWuPai/
├── App.js
├── README.md
├── __tests__
│   └── App-test.js
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── settings.gradle
├── ios
│   ├── react-native-iShiWuPai
│   ├── react-native-iShiWuPai.xcodeproj
│   ├── react-native-iShiWuPai.xcworkspace
│   ├── Podfile
│   ├── Podfile.lock
│   ├── Pods
├── node_modules
├── package.json
├── index.js
├── yarn.lock

目录结构介绍

• App.js: 项目的入口文件。
• README.md: 项目说明文档。
• __tests__: 存放测试文件的目录。
• android: 包含 Android 项目的相关文件。
• ios: 包含 iOS 项目的相关文件。
• node_modules: 存放项目依赖的模块。
• package.json: 项目的配置文件，包含依赖信息和脚本命令。
• index.js: 项目的启动文件。
• yarn.lock: 锁定依赖版本的文件。

2. 项目的启动文件介绍

index.js

index.js 是项目的启动文件，主要负责初始化 React Native 应用并加载 App.js 文件。

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

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

App.js

App.js 是应用的主组件，包含了应用的主要逻辑和界面布局。

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖信息，以及一些脚本命令。

{
  "name": "react-native-iShiWuPai",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.10"
  },
  "devDependencies": {
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
   

react-native-iShiWuPai🍔一个基于 React Native 和 Redux、MobX 实现的展示型 Demo。项目地址:https://gitcode.com/gh_mirrors/re/react-native-iShiWuPai