React Native 上开发 VisionOs 应用,首先需要准备:
然后,就是初始化一个项目非常简单,直接执行如下命令。
npx @callstack/react-native-visionos@latest init app_name
随后,巴拉巴拉一大堆的依赖的安装:
随后就是为 visionos 目录做依稀代码注入了:
cd visionos
bundle install
bundle exec pod install
安装成功之后,就可以跑起来了,首先你的执行 yarn start
yarn start # 这个不要忽略,这是 yarn visionos 执行起来的基础
yarn visionos
我们修改一下 App.tsx,比如修改下 step one他们的文案 ,然后保存看看。可以看到直接保存,就更新了,这说明热更新还是好使的。
以下是修改后的 App.tsx 的代码
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;
可以看看跑起来的效果
整个过程走下来,可以总结下:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。