Redux状态变更后渲染含动态注入JS的WebView问题咨询

你的思路完全没问题！通过Redux的success状态来控制WebView的渲染时机，刚好能解决API请求未完成时没有注入JS的问题。下面是完善后的实现方案，包含一些细节处理，帮你把这个逻辑落地：

1. 确保组件正确连接Redux #

首先要保证你的组件已经通过connect方法连接到Redux store，获取到oauth模块里的关键状态——success标记和从API拿到的injectedJs脚本内容：

import { connect } from 'react-redux';

class WebViewPage extends React.Component {
  // 组件逻辑写在这里
}

// 从Redux store中映射需要的状态到组件props
const mapStateToProps = (state) => ({
  oauth: state.oauth // 假设你的store中oauth模块包含success和injectedJs字段
});

export default connect(mapStateToProps)(WebViewPage);

2. 完善条件渲染与WebView注入逻辑 #

在render方法里，我们根据success状态切换loading和WebView的显示，同时给注入JS加一层兜底判断，避免API返回空脚本的情况：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview'; // 现在官方推荐使用这个第三方库，而非原生内置WebView

class WebViewPage extends React.Component {
  // 封装WebView渲染逻辑，让render方法更简洁
  renderWebView = () => {
    const { injectedJs } = this.props.oauth;

    // 兜底处理：如果注入脚本为空，显示错误提示
    if (!injectedJs) {
      return <Text style={styles.error}>Failed to load injected script</Text>;
    }

    return (
      <WebView
        source={{ uri: '替换成你的WebView目标URL' }}
        injectedJavaScript={injectedJs} // 传入从API获取的动态脚本
        javaScriptEnabled={true} // 必须开启JS支持，否则注入脚本无效
        onLoad={() => {
          console.log('WebView loaded with dynamic injected script');
        }}
      />
    );
  };

  render() {
    const { success } = this.props.oauth;

    return (
      <View style={styles.container}>
        {!success ? (
          <Text style={styles.loading}>Loading...</Text>
        ) : (
          this.renderWebView()
        )}
      </View>
    );
  }
}

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loading: {
    fontSize: 16,
    color: '#666',
  },
  error: {
    fontSize: 16,
    color: '#ff3333',
  },
});

额外优化点 #

• Redux Action 处理：一定要确保API请求完成后，不仅把success设为true，还要将获取到的动态JS内容存入oauth模块的injectedJs字段中，这样组件才能拿到有效的注入脚本。
• 注入时机选择：如果你的脚本需要在WebView内容加载前执行，可以改用injectedJavaScriptBeforeContentLoaded属性；如果需要在页面加载完成后触发，可以用postMessage配合WebView的onMessage回调来实现，根据业务需求灵活选择。
• 异常场景覆盖：上面的代码中已经处理了脚本为空的情况，你还可以根据需要添加API请求失败的状态判断（比如oauth.error），显示对应的错误提示，提升用户体验。

这样就能完美实现你的需求：进入页面时显示loading，当Redux中的success变为true（API请求完成且拿到注入JS），才渲染带有动态注入脚本的WebView。

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