前言

去年微软开源了 react-native-windows, 支持将 React Native App 跑在 Windows 上。而在近日，其又宣布了支持 MacOS。
为了体验一波，所以使用 cnode 的 API 来写个 Demo 尝尝鲜。

创建项目

  1. 初始化项目并进入根目录
  1. npx react-native init cnodeMac --version 0.61.5
  2. cd cnodeMac
  1. 安装 macOS 拓展
  1. npx react-native-macos-init
  1. 启动项目
  1. npx react-native run-macos

image.png

代码实现

我们使用 cnode 的列表 API 获取数据，渲染一个列表。代码如下：

  1. import React, { useState, useEffect } from 'react';
  2. import {
  3.   SafeAreaView,
  4.   StyleSheet,
  5.   View,
  6.   Text,
  7.   StatusBar,
  8.   FlatList,
  9.   Image,
  10. } from 'react-native';
  12. const Item = ({ author, title })=> {
  13.   return (
  14.       <View style={styles.container}>
  15.         <Image style={styles.avatar} source={{ uri: author.avatar_url }} />
  16.         <View>
  17.           <Text style={styles.title}>{title}</Text>
  18.           <Text style={styles.title}>{author.loginname}</Text>
  19.         </View>
  20.       </View>
  21.   );
  22. }
  24. const App = () => {
  25.   const [refreshing, setRefreshing] = useState(false);
  26.   const [state, setState] = useState({
  27.     page: 0,
  28.     data: [],
  29.   });
  31.   const getData = async (isRefresh) => {
  32.     setRefreshing(true);
  33.     const page = isRefresh ? 1 : state.page + 1;
  34.     const response = await fetch(`https://cnodejs.org/api/v1/topics?page=${page}&mdrender=false`);
  35.     const { success, data } = await response.json();
  36.     if (success) {
  37.      setState({
  38.        page,
  39.        data: [...state.data, ...data],
  40.      });
  41.     }
  42.     setRefreshing(false);
  43.   };
  45.   useEffect(() => {
  46.     getData(true);
  47.   }, []);
  49.   return (
  50.     <>
  51.       <StatusBar barStyle="dark-content" />
  52.       <SafeAreaView>
  53.         <FlatList
  54.             refreshing={refreshing}
  55.             data={state.data}
  56.             keyExtractor={item => item.id}
  57.             renderItem={({ item }) => <Item {...item} />}
  58.             onRefresh={() => getData(true)}
  59.             onEndReached={() => getData()}
  60.         />
  61.       </SafeAreaView>
  62.     </>
  63.   );
  64. };
  66. const styles = StyleSheet.create({
  67.   container: {
  68.     display: 'flex',
  69.     flexDirection: 'row',
  70.     backgroundColor: '#fff',
  71.     padding: 10,
  72.   },
  73.   avatar: {
  74.     width: 50,
  75.     height: 50,
  76.     marginRight: 10,
  77.   },
  78.   title: {
  79.     fontSize: 14,
  80.   },
  81. });
  83. export default App;

预览效果如下：
image.png

体验结果

总体开发过程中，总是会出现一些莫名其妙的异常导致红屏。开发体验较差，所以就只有写了一个简单的列表页。因此，目前还不建议投入正式使用。

结语

随着这两年 Flutter 的火起，React Native 团队也宣布了对 React Native 进行重构，而微软也加入到 React Native 的桌面端的支持中来。对于既有移动端及桌面端的项目，也是多了一种选择。而 React Native 由于使用 JavaScript，对于前端开发者而言，入门成本更低。
早期 React Native 由于一堆坑及其团队维护问题，也遭到诸如 Airbnb 等团队的放弃。React Native 也将在年底完成重构，其新架构对性能等方面的优化，倒也是值得期待。