react-native-worklets

import React, { useState } from 'react';
import { Button, StyleSheet, View, Text } from 'react-native';
import { createWorkletRuntime, runOnRuntime, runOnJS } from '@amazon-devices/react-native-worklets';
 
/**
 * 自定义Worklet运行时示例
 * 演示如何创建和使用自定义worklet运行时，以进行并行处理。
 */
export default function WorkletCustomRuntimeExample() {
  const [result, setResult] = useState<string>('');
 
  const handlePress = () => {
    setResult('Processing...');
    
    // 使用初始化程序创建自定义运行时
    const customRuntime = createWorkletRuntime('myCustomRuntime', () => {
      'worklet';
      console.log('自定义运行时已完成初始化！');
    });
 
    // 在自定义运行时上运行代码
    runOnRuntime(customRuntime, () => {
      'worklet';
      console.log('在自定义运行时上运行');
      
      // 在不阻塞用户界面或JS线程的前提下执行繁重计算
      let sum = 0;
      for (let i = 0; i < 1000000; i++) {
        sum += i;
      }
      
      const result = `计算完成！ 总和：${sum}`;
      console.log(result);
      runOnJS(setResult)(result);
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>自定义Worklet运行时</Text>
      <Text style={styles.description}>
        为特定工作负载创建独立的JavaScript运行时。
        {'\n\n'}
        繁重计算可并行执行，用户界面与JS线程始终畅通。
      </Text>
      <Button title="在自定义运行时上运行" onPress={handlePress} />
      {result && <Text style={styles.result}>{result}</Text>}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    lineHeight: 20,
  },
  result: {
    marginTop: 20,
    fontSize: 16,
    color: '#007AFF',
    fontWeight: '500',
  },
});

import React, { useState } from 'react';
import { Button, StyleSheet, View, Text, ScrollView } from 'react-native';
import { runOnUI, runOnJS } from '@amazon-devices/react-native-worklets';
 
/**
 * 线程切换示例
 * 演示如何在JavaScript和用户界面线程之间切换
 */
export default function WorkletThreadSwitchExample() {
  const [log, setLog] = useState<string[]>([]);
 
  const addLog = (message: string) => {
    setLog(prev => [...prev, message]);
  };
 
  const handlePress = () => {
    setLog([]);
    
    // 在JS线程上启动
    addLog('1.在JS线程上启动');
    
    // 切换到用户界面线程
    runOnUI(() => {
      'worklet';
      console.log('2.现在位于用户界面线程上');
      runOnJS(addLog)('2.现在位于用户界面线程上');
      
      // 在用户界面线程上执行任务
      const sum = Array.from({ length: 100 }, (_, i) => i).reduce((a, b) => a + b, 0);
      console.log('3.在用户界面线程上计算总和：', sum);
      runOnJS(addLog)(`3.计算出的总和：${sum}`);
      
      // 回调到JS线程
      runOnJS(addLog)('4.返回JS线程');
    })();
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>线程切换</Text>
      <Text style={styles.description}>
        演示如何通过runOnUI和runOnJS，在JavaScript和用户界面线程之间切换。
      </Text>
      <Button title="Switch Threads" onPress={handlePress} />
      {log.length > 0 && (
        <ScrollView style={styles.logContainer}>
          {log.map((entry, index) => (
            <Text key={index} style={styles.logEntry}>{entry}</Text>
          ))}
        </ScrollView>
      )}
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  description: {
    fontSize: 14,
    color: '#666',
    marginBottom: 20,
    lineHeight: 20,
  },
  logContainer: {
    marginTop: 20,
    maxHeight: 300,
    padding: 12,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  logEntry: {
    fontSize: 14,
    color: '#333',
    marginVertical: 4,
  },
});