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，涵盖了核心功能模块，如用户登录、数据采集、地图显示和数据同步。可以在此基础上进行进一步的优化和扩展，根据实际需求添加更多功能和细节。