如何将React Native网站与RN应用关联实现内容双向同步？

1. 核心思路：共享后端服务 #

RN网站（React Web应用）和RN APP本质都是前端载体，要实现内容双向同步，必须依赖统一的后端服务作为数据中枢。所有数据的读写操作都通过后端接口完成，两个前端只负责调用接口展示数据、提交用户操作，以此保证数据一致性。

2. 技术栈选型 #

后端部分 #

• 框架：可选用Node.js+Express、Python+Django/Flask、Java Spring等，只要能提供RESTful API或GraphQL接口即可
• 数据库：银行场景优先选关系型数据库（PostgreSQL、MySQL），支持事务与数据一致性；非关系型数据库（MongoDB）可用于非核心非敏感数据存储
• 身份认证：必须采用JWT或OAuth2协议，配合HTTPS加密传输，确保接口调用的安全性

前端部分（RN网站与APP通用） #

• 状态管理：使用Redux Toolkit或Zustand统一管理全局数据状态，两个前端可复用状态逻辑代码
• API请求库：用Axios或Fetch封装统一的请求拦截器，处理token注入、错误捕获等通用逻辑
• 跨域处理：RN网站需配置后端CORS规则，允许前端域名访问；RN APP本身无跨域限制

3. 关键实现步骤 #

第一步：搭建后端API接口 #

以Node.js+Express+PostgreSQL为例，核心代码示例：

// 安装依赖：npm install express cors jsonwebtoken pg
const express = require('express');
const cors = require('cors');
const jwt = require('jsonwebtoken');
const { Pool } = require('pg');

const app = express();
// 配置CORS，允许RN网站域名访问
app.use(cors({ origin: ['https://your-web-domain.com'] }));
app.use(express.json());

// PostgreSQL数据库连接配置
const pool = new Pool({
  user: 'bank_db_user',
  host: 'localhost',
  database: 'bank_platform_db',
  password: 'your-db-password',
  port: 5432,
});

// JWT身份验证中间件
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) return res.sendStatus(401);
  
  jwt.verify(token, 'your-jwt-secret-key', (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// 获取用户账户列表接口
app.get('/api/accounts', authenticateToken, async (req, res) => {
  const result = await pool.query('SELECT * FROM accounts WHERE user_id = $1', [req.user.id]);
  res.json(result.rows);
});

// 创建新账户接口
app.post('/api/accounts', authenticateToken, async (req, res) => {
  const { balance, account_type } = req.body;
  const result = await pool.query(
    'INSERT INTO accounts (user_id, balance, account_type) VALUES ($1, $2, $3) RETURNING *',
    [req.user.id, balance, account_type]
  );
  res.json(result.rows[0]);
});

app.listen(3000, () => console.log('Backend service running on port 3000'));

第二步：前端统一封装API请求 #

RN网站和APP可复用同一套API封装逻辑，仅在存储token的方式上区分（网站用localStorage，APP用AsyncStorage）：

// api.js
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const api = axios.create({
  baseURL: 'https://your-backend-domain.com/api',
});

// 请求拦截器：自动注入token
api.interceptors.request.use(async (config) => {
  // RN网站替换为localStorage.getItem('token')
  const token = await AsyncStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器：处理未授权等错误
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // RN网站跳转登录页：window.location.href = '/login'
      // RN APP跳转登录页：navigation.navigate('Login')
      console.log('用户未授权，请重新登录');
    }
    return Promise.reject(error);
  }
);

// 封装业务接口
export const getAccounts = () => api.get('/accounts');
export const createAccount = (data) => api.post('/accounts', data);

第三步：前端数据同步逻辑 #

在两个前端中调用封装的接口，完成数据展示与提交后的同步刷新：

• RN网站示例（React）：

import { useEffect, useState } from 'react';
import { getAccounts, createAccount } from './api';

function AccountsPage() {
  const [accounts, setAccounts] = useState([]);

  // 页面加载时获取账户数据
  useEffect(() => {
    fetchAccounts();
  }, []);

  const fetchAccounts = async () => {
    const res = await getAccounts();
    setAccounts(res.data);
  };

  // 创建账户后重新拉取数据，实现同步
  const handleCreateAccount = async (e) => {
    e.preventDefault();
    await createAccount({ balance: 1000, account_type: 'savings' });
    fetchAccounts();
  };

  return (
    <div className="accounts-container">
      <h1>我的账户</h1>
      <button onClick={handleCreateAccount}>创建储蓄账户</button>
      <ul>
        {accounts.map(account => (
          <li key={account.id}>
            {account.account_type}账户：{account.balance}元
          </li>
        ))}
      </ul>
    </div>
  );
}

• RN APP示例：

import { useEffect, useState } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import { getAccounts, createAccount } from './api';

function AccountsScreen() {
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    fetchAccounts();
  }, []);

  const fetchAccounts = async () => {
    const res = await getAccounts();
    setAccounts(res.data);
  };

  const handleCreateAccount = async () => {
    await createAccount({ balance: 1000, account_type: 'savings' });
    fetchAccounts();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的账户</Text>
      <Button title="创建储蓄账户" onPress={handleCreateAccount} />
      <FlatList
        data={accounts}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Text style={styles.itemText}>
            {item.account_type}账户：{item.balance}元
          </Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  itemText: {
    fontSize: 16,
    marginVertical: 8,
  },
});

4. 银行场景额外注意事项 #

• 数据加密：敏感数据（账户余额、用户信息）传输用HTTPS，数据库存储时对核心字段加密
• 实时同步：如需实时更新数据，可集成WebSocket（如Socket.io），后端数据变更时主动推送给两个前端
• 权限控制：每个接口需校验用户权限，确保用户只能访问自身数据
• 错误处理：前端需处理网络异常、接口错误并给出友好提示；后端需做参数校验、事务回滚，避免数据不一致

内容的提问来源于stack exchange，提问作者sean froelich