React Native 上开发 VisionOS App 初步尝试

React Native 上开发 VisionOs 应用，首先需要准备：

建议 m2 Pro 以上芯片的 Mac Pro
安装 Xcode 15.2，以及iOS 模拟器，和 VisionOs 模拟器
本机安装 cmake，直接 brew install cmake 即可

然后，就是初始化一个项目非常简单，直接执行如下命令。

java 复制代码

 npx @callstack/react-native-visionos@latest init app_name

随后，巴拉巴拉一大堆的依赖的安装：

随后就是为 visionos 目录做依稀代码注入了：

bash 复制代码

cd visionos
bundle install
bundle exec pod install

安装成功之后，就可以跑起来了，首先你的执行 yarn start

bash 复制代码

yarn start # 这个不要忽略，这是 yarn visionos 执行起来的基础
yarn visionos

我们修改一下 App.tsx，比如修改下 step one他们的文案，然后保存看看。可以看到直接保存，就更新了，这说明热更新还是好使的。

整一个 hack News 看看

以下是修改后的 App.tsx 的代码

ini 复制代码

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View, StyleSheet, Platform } from 'react-native';

const App = () => {
  const [stories, setStories] = useState([]);

  useEffect(() => {
    const fetchStories = async () => {
      const result = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json');
      const ids = await result.json();
      const top10Ids = ids.slice(0, 10);

      const storyPromises = top10Ids.map(id => fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`).then(res => res.json()));
      const stories = await Promise.all(storyPromises);

      setStories(stories);
    };

    fetchStories();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Top 10 Hacker News Stories</Text>
      <FlatList
        data={stories}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.storyTitle}>{item.title}</Text>
            <Text style={styles.storyAuthor}>By: {item.by}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F5F5F5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  item: {
    backgroundColor: '#FFFFFF',
    padding: 20,
    marginBottom: 10,
    borderRadius: 5,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 2,
      },
      android: {
        elevation: 5,
      },
    }),
  },
  storyTitle: {
    fontSize: 18,
    marginBottom: 5,
  },
  storyAuthor: {
    fontSize: 14,
    color: 'gray',
  },
});

export default App;

可以看看跑起来的效果

整个过程走下来，可以总结下：

react native 是支持 visionos 开发的，而且新启动一个项目非常简单，几乎傻瓜式的。
react native 还是可以热更新的，这对于提升编码效率非常有帮助。
更具文档看，react native 还提供了已有项目迁移到visionos 版本的支持，https://callstack.github.io/react-native-visionos-docs/docs/guides/integrate-into-existing-projects
react native 更是支持immersive-space https://callstack.github.io/react-native-visionos-docs/docs/guides/immersive-spaces ,虽然我尝试了下，没有成功，但是原生应用是 ok 的，这里可能还是有一些配置上的问题，在 react native 中写 swift 文件需要做关联，那么最简单的方法可能是在 xcode 中去添加 swift 文件，这样工程会自动配置引用，然后在回到 vscode 中来做引用。

探索代码的无限可能，与老码小张一起开启技术之旅。点关注，未来已来，每一步深入都不孤单。