React Native 快速Demo（1）

为了快速实现一个项目雏型（prototype）demo并提交给他们确认，可以按照以下步骤进行：

1. 环境设置

1.1 安装开发工具

• 安装Node.js和npm：用于管理项目依赖。

  sudo apt install nodejs
  sudo apt install npm

• 安装React Native CLI：用于创建和管理React Native项目。

  npm install -g react-native-cli

• 安装Android Studio和Xcode（如果需要支持iOS）：用于构建和调试应用。

2. 创建React Native项目

react-native init CordePrototype
cd CordePrototype

3. 安装必要的依赖

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

4. 设置Redux状态管理

4.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;

4.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;
  }
}

5. 设置导航

5.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;

6. 创建屏幕组件

6.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;

6.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;

7. 创建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);
  }
};

8. 配置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; i < results.rows.length; i++) {
            logs.push(results.rows.item(i));
          }
          resolve(logs);
        },
        error => {
          reject(error);
        }
      );
    });
  });
};

9. 设置主应用入口

修改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;

10. 运行项目

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

10.2 运行React Native项目

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

总结

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