Emotion_Apps/src/PageRenderer.js at master · Chillizu/Emotion_Apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from 'react-native';

// 页面渲染引擎 - 根据JSON配置动态生成UI
const PageRenderer = ({pageConfig}) => {
  if (!pageConfig) {
    return (
      <View style={styles.errorContainer}>
        <Text style={styles.errorText}>页面配置为空</Text>
      </View>
    );
  }

  const renderComponent = (component, index) => {
    const {type, props, children, style} = component;
    const key = `${type}_${index}`;

    // 合并基础样式和自定义样式
    const componentStyle = [styles[type], style];

    switch (type) {
      case 'container':
        return (
          <View key={key} style={componentStyle} {...props}>
            {children && children.map(renderComponent)}
          </View>
        );

      case 'text':
        return (
          <Text key={key} style={componentStyle} {...props}>
            {component.content}
          </Text>
        );

      case 'image':
        return (
          <Image
            key={key}
            source={{uri: component.source}}
            style={componentStyle}
            {...props}
          />
        );

      case 'button':
        return (
          <TouchableOpacity
            key={key}
            style={componentStyle}
            onPress={() => {
              if (component.action === 'navigate' && component.target) {
                // 这里可以添加导航逻辑
                console.log(`导航到: ${component.target}`);
              }
            }}
            {...props}>
            <Text style={styles.buttonText}>{component.text}</Text>
          </TouchableOpacity>
        );

      case 'scrollview':
        return (
          <ScrollView key={key} style={componentStyle} {...props}>
            {children && children.map(renderComponent)}
          </ScrollView>
        );

      default:
        return (
          <View key={key} style={componentStyle}>
            <Text>未知组件: {type}</Text>
          </View>
        );
    }
  };

  return (
    <View style={styles.page}>
      {pageConfig.components && pageConfig.components.map(renderComponent)}
    </View>
  );
};

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorText: {
    fontSize: 16,
    color: '#ff0000',
  },
  container: {
    padding: 16,
  },
  text: {
    fontSize: 16,
    color: '#333333',
    marginBottom: 8,
  },
  image: {
    width: '100%',
    height: 200,
    marginBottom: 16,
    borderRadius: 8,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 16,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
  scrollview: {
    flex: 1,
  },
});

export default PageRenderer;