React Native 快速Demo（2）

好的，以下是开发环境的详细设置步骤，包括需要安装的工具和每个工具的安装步骤。

1. Node.js 和 npm

Node.js 是一个 JavaScript 运行时环境，npm 是 Node.js 的包管理器。

1.1 安装 Node.js 和 npm

下载 Node.js 安装程序：Node.js 官网
安装程序将同时安装 Node.js 和 npm

验证安装：

node -v
npm -v

2. React Native CLI

React Native CLI 用于创建和管理 React Native 项目。

2.1 安装 React Native CLI

npm install -g react-native-cli

验证安装：

react-native -v

3. Android Studio

Android Studio 是一个用于 Android 应用开发的官方集成开发环境 (IDE)。

3.1 下载和安装 Android Studio

下载 Android Studio：Android Studio 官网
按照安装向导进行安装

3.2 配置 Android Studio

启动 Android Studio，按照安装向导安装 Android SDK

配置 ANDROID_HOME 环境变量：

打开终端并添加以下内容到 ~/.bash_profile 或 ~/.zshrc 文件中：

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

重新加载配置文件：

source ~/.bash_profile
# 或
source ~/.zshrc

3.3 安装必要的 Android SDK 工具

启动 Android Studio
打开 “SDK Manager”（在欢迎屏幕或 “Preferences” 中找到）
安装以下 SDK 工具：
- Android SDK Platform-Tools
- Android SDK Build-Tools
- Android API Level（推荐安装最新版本）

4. Xcode (仅限 macOS)

Xcode 是用于 iOS 应用开发的官方集成开发环境 (IDE)。

4.1 下载和安装 Xcode

从 Mac App Store 下载 Xcode

4.2 配置 Xcode

启动 Xcode，按照安装向导安装必要的组件
确保 Xcode Command Line Tools 已安装：
```
xcode-select --install
```

5. 设置 React Native 项目

5.1 创建 React Native 项目

react-native init CordePrototype
cd CordePrototype

6. 安装必要的依赖库

在项目根目录下运行以下命令：

npm install redux react-redux redux-thunk
npm install @react-navigation/native @react-navigation/stack
npm install react-native-sqlite-storage
npm install axios
npm install react-native-maps

7. 设置 Android 模拟器

7.1 创建 Android 虚拟设备 (AVD)

启动 Android Studio
打开 “AVD Manager”（在欢迎屏幕或 “Tools” 菜单中找到）
创建一个新的虚拟设备，选择设备类型和系统镜像（推荐选择最新版本）

8. 运行 React Native 项目

8.1 启动 Android 模拟器或连接实际设备

打开 Android Studio，启动创建的虚拟设备
或连接实际的 Android 设备并启用开发者模式和 USB 调试

8.2 运行 React Native 项目

在项目根目录下运行以下命令：

npx react-native run-android
# 或
npx react-native run-ios

9. 配置 Redux 状态管理

9.1 创建 Redux Store

在 src 文件夹下创建 store 文件夹，并创建 store.js 文件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

9.2 创建 Reducer

在 src 文件夹下创建 reducers 文件夹，并创建 index.js 文件：

import { combineReducers } from 'redux';
import logsReducer from './logsReducer';

export default combineReducers({
  logs: logsReducer,
});

在 reducers 文件夹下创建 logsReducer.js 文件：

const initialState = {
  logs: [],
};

export default function(state = initialState, action) {
  switch(action.type) {
    case 'FETCH_LOGS_SUCCESS':
      return {
        ...state,
        logs: action.payload,
      };
    default:
      return state;
  }
}

10. 设置导航

10.1 配置 React Navigation

在 src 文件夹下创建 navigation 文件夹，并创建 AppNavigator.js 文件：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import LogScreen from '../screens/LogScreen';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Log" component={LogScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

11. 创建屏幕组件

11.1 HomeScreen 组件

在 src 文件夹下创建 screens 文件夹，并创建 HomeScreen.js 文件：

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Log"
        onPress={() => navigation.navigate('Log')}
      />
    </View>
  );
}

export default HomeScreen;

11.2 LogScreen 组件

在 screens 文件夹下创建 LogScreen.js 文件：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { View, Text, FlatList } from 'react-native';
import { fetchLogs } from '../actions/logActions';

function LogScreen() {
  const dispatch = useDispatch();
  const logs = useSelector(state => state.logs.logs);

  useEffect(() => {
    dispatch(fetchLogs());
  }, [dispatch]);

  return (
    <View>
      <Text>Log Screen</Text>
      <FlatList
        data={logs}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.description}</Text>
          </View>
        )}
      />
    </View>
  );
}

export default LogScreen;

12. 创建 Redux Actions

在 src 文件夹下创建 actions 文件夹，并创建 logActions.js 文件：

import axios from 'axios';

export const fetchLogs = () => async dispatch => {
  try {
    const response = await axios.get('https://api.example.com/logs');
    dispatch({
      type: 'FETCH_LOGS_SUCCESS',
      payload: response.data,
    });
  } catch (error) {
    console.error(error);
  }
};

13. 配置 SQLite 数据库

在 src 文件夹下创建 database 文件夹，并创建 database.js 文件：

import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase(
  {
    name: 'CordeDB',
    location: 'default',
  },
  () => {},
  error => {
    console.log(error);
  }
);

export const createTables = () => {
  db.transaction(tx => {
    tx.executeSql(
      `CREATE TABLE IF NOT EXISTS logs (id INTEGER PRIMARY KEY AUTOINCREMENT, description TEXT)`,
      [],
      () => {
        console.log('Table created successfully');
      },
      error => {
        console.log('Error creating table:', error);
      }
    );
  });
};

export const insertLog = description => {
  db.transaction(tx => {
    tx.executeSql(
      `INSERT INTO logs (description) VALUES (?)`,
      [description],
      () => {
        console.log('Log inserted successfully');
      },
      error => {
        console.log('Error inserting log:', error);
      }
    );
  });
};

export const fetchLogs = () => {
  return new Promise((resolve, reject) => {
    db.transaction(tx => {
      tx.executeSql(
        `SELECT * FROM logs`,
        [],
        (tx, results) => {
          let logs = [];
          for (let i = 0; results.rows.length; i++) {
            logs.push(results.rows.item(i));
          }
          resolve(logs);
        },
        error => {
          reject(error);
        }
      );
    });
  });
};

14. 设置主应用入口

修改 App.js 文件：


import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import store from './src/store/store';
import AppNavigator from './src/navigation/AppNavigator';
import { createTables } from './src/database/database';

function App() {
  useEffect(() => {
    createTables();
  }, []);

  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
}

export default App;

15. 运行项目

15.1 启动 Android 模拟器或连接实际设备

打开 Android Studio，启动创建的虚拟设备
或连接实际的 Android 设备并启用开发者模式和 USB 调试

15.2 运行 React Native 项目

在项目根目录下运行以下命令：

npx react-native run-android
# 或
npx react-native run-ios

总结

通过以上步骤，可以快速实现一个基本的项目雏型demo，涵盖了核心功能模块，如用户登录、数据采集、地图显示和数据同步。可以在此基础上进行进一步的优化和扩展，根据实际需求添加更多功能和细节。

秒客网

React Native 快速Demo（2）

1. Node.js 和 npm

1.1 安装 Node.js 和 npm

2. React Native CLI

2.1 安装 React Native CLI

3. Android Studio

3.1 下载和安装 Android Studio

3.2 配置 Android Studio

3.3 安装必要的 Android SDK 工具

4. Xcode (仅限 macOS)

4.1 下载和安装 Xcode

4.2 配置 Xcode

5. 设置 React Native 项目

5.1 创建 React Native 项目

6. 安装必要的依赖库

7. 设置 Android 模拟器

7.1 创建 Android 虚拟设备 (AVD)

8. 运行 React Native 项目

8.1 启动 Android 模拟器或连接实际设备

8.2 运行 React Native 项目

9. 配置 Redux 状态管理

9.1 创建 Redux Store

9.2 创建 Reducer

10. 设置导航

10.1 配置 React Navigation

11. 创建屏幕组件

11.1 HomeScreen 组件

11.2 LogScreen 组件

12. 创建 Redux Actions

13. 配置 SQLite 数据库

14. 设置主应用入口

15. 运行项目

15.1 启动 Android 模拟器或连接实际设备

15.2 运行 React Native 项目

总结

相关文章