添加ReactUI-未显示，待继续调试

TypeScript/ui/index.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { VerticalBox, CanvasPanel, ReactUMG, CanvasPanelSlot, Button, HorizontalBox/*, TextureImage*/ } from 'react-umg';
+import {StatusBar} from './ui-components'
+interface Props {
+    names: string[];
+}
+
+interface State {
+    names: string[];
+    buttonTextureIndex: 0 | 1;
+}
+
+let SlotOfVerticalBox: CanvasPanelSlot = {
+    LayoutData: {
+        Offsets: {
+            Left: 120,
+            Top: 120,
+            Right: 480,
+            Bottom: 80
+        }
+    }
+}
+
+class Hello extends React.Component<Props, State> {
+    constructor(props: Props) {
+      super(props);
+      this.state = {
+        names: props.names,
+        buttonTextureIndex : 0,
+      };
+    }
+    render() {
+        return (
+            <CanvasPanel>
+                <VerticalBox Slot={SlotOfVerticalBox}>
+                    <HorizontalBox>
+                    <Button OnHovered={() => this.setState({buttonTextureIndex: 1})} OnUnhovered={() => this.setState({buttonTextureIndex: 0})} >
+                        {this.state.buttonTextureIndex == 0 ? 'normal' : 'hovered'}
+                    </Button>
+                    </HorizontalBox>
+                    {this.state.names.map((name, idx) => <StatusBar name={name} key={idx}/>)}
+                </VerticalBox>
+            </CanvasPanel>
+        );
+    }
+}
+
+export function Load(){
+    return ReactUMG.render(
+        <Hello names={["Health:", "Energy:"]}/>
+    );
+};

TypeScript/ui/ui-components.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Button, HorizontalBox, TextBlock, ProgressBar, HorizontalBoxSlot } from 'react-umg';
+import {LinearColor} from 'ue'
+
+export interface Props {
+    name: string;
+    initialPercent?: number;
+}
+
+interface State {
+    percent: number;
+}
+
+let SlotOfProgressBar: HorizontalBoxSlot = {
+    Size: {
+        SizeRule: 1
+    }
+}
+
+export class StatusBar extends React.Component<Props, State> {
+    constructor(props: Props) {
+      super(props);
+  
+      if ((props.initialPercent || 0) < 0) {
+        throw new Error('initialPercent < 0');
+      }
+  
+      this.state = {
+        percent: props.initialPercent || 0.5
+      };
+    }
+
+    get color(): Partial<LinearColor> {
+        return {R: 1 - this.state.percent , G: 0, B: this.state.percent};
+    }
+  
+    onIncrement = () => this.setState({percent: this.state.percent + 0.01});
+    onDecrement = () => this.setState({percent: this.state.percent - 0.01});
+    
+    render() {
+        return (
+            <HorizontalBox>
+                <TextBlock Text={`${this.props.name}(${this.state.percent.toFixed(2)})`}/>
+                <ProgressBar Percent={this.state.percent} Slot={SlotOfProgressBar} FillColorAndOpacity={this.color}/>
+                <Button OnClicked={this.onIncrement} >+</Button>
+                <Button OnClicked={this.onDecrement} >-</Button>
+            </HorizontalBox>
+        );
+    }
+}