市场平台
作者 NativeScript.org
@dark-engine/platform-native
由 dark-engine 编写 | v1.4.2
通过 NativeScript 将暗色渲染器扩展到原生平台，如 Android 和 iOS
npm i --save @dark-engine/platform-native

@dark-engine/platform-native 🌖

通过 NativeScript 将暗色渲染器扩展到移动平台，如 Android 和 iOS。

NativeScript 是一个免费的开源框架，用于使用 JavaScript 或任何可以转换为 JavaScript 的语言在 iOS 和 Android 平台上构建原生移动应用程序。它允许开发者编写一个代码库用于两个平台，从而实现原生性能和访问设备特定 API，同时仍然利用熟悉的 Web 开发工具和范式。

关于 Dark 更多信息

app.webm

安装

按照这里的说明安装 NativeScript

从模板

npx degit github:atellmer/dark/templates/native app
cd app
npm i
npm start

npm

npm install @nativescript/core @dark-engine/core @dark-engine/animations @dark-engine/platform-native

yarn

yarn add @nativescript/core @dark-engine/core @dark-engine/animations @dark-engine/platform-native

用法

import { component, useState } from '@dark-engine/core';
import { FlexboxLayout, Button } from '@dark-engine/platform-native';

const App = component(() => {
  const [count, setCount] = useState(0);

  return (
    <FlexboxLayout justifyContent='center' alignItems='center'>
      <Button
        backgroundColor='purple'
        padding={16}
        onTap={() => setCount(count + 1)}>
        Fired {count} times
      </Button>
    </FlexboxLayout>
  );
});

您也可以编写不带 JSX 的任何代码

import { component, useState } from '@dark-engine/core';
import { FlexboxLayout, Button } from '@dark-engine/platform-native';

const App = component(() => {
  const [count, setCount] = useState(0);

  return FlexboxLayout({
    justifyContent: 'center',
    alignItems: 'center',
    slot: [
      Button({
        backgroundColor: 'purple',
        padding: 16,
        text: `Fired ${count} times`,
        onTap: () => setCount(count + 1),
      }),
    ],
  });
});

环境设置

您可以在 这里 找到完整的工作示例以及环境设置，或者直接从模板安装。

API

import {
  type SyntheticEvent,
  run,
  registerElement,
  factory,
  View,
  Text,
  Image,
  Button,
  ScrollView,
  TouchableOpacity,
  TextField,
  Modal,
  ActionBar,
  ActionItem,
  NavigationButton,
  ActivityIndicator,
  RootLayout,
  AbsoluteLayout,
  StackLayout,
  FlexboxLayout,
  GridLayout,
  DockLayout,
  WrapLayout,
  ContentView,
  HtmlView,
  WebView,
  Slider,
  Switch,
  Placeholder,
  ListView,
  ListPicker,
  DatePicker,
  TimePicker,
  Label,
  TextView,
  FormattedString,
  Span,
  TabView,
  TabViewItem,
  Frame,
  Page,
  VERSION,
} from '@dark-engine/platform-native';

挂载到原生平台

要挂载您的应用程序，您需要使用 run 函数

import { run } from '@dark-engine/platform-native';

import App from './components/app';

run(App());

布局系统

布局中放置元素的系统包括以下组件

import {
  RootLayout,
  AbsoluteLayout,
  StackLayout,
  FlexboxLayout,
  GridLayout,
  DockLayout,
  WrapLayout,
} from '@dark-engine/platform-native';

要了解更多关于它们的工作原理，您可以访问 NativeScript 文档。

条件渲染

您可以使用条件渲染，但请注意 NativeScript 对元素树中的频繁插入和删除很敏感。因此，在可能的情况下，应使用替代方法 - 隐藏和可见属性，更多关于这些属性的信息可以在 NativeScript 文档 中找到。

// variant 1
return (
  <>
    {
      isFetching
      ? <FlexboxLayout
          height='100%'
          justifyContent='center'
          alignItems='center'>
          <ActivityIndicator busy />
        </FlexboxLayout>
      : <StackLayout>
          <Label>Hello 🥰</Label>
        </StackLayout>
    }
  </>
);
// variant 2
return (
  <>
    <FlexboxLayout
      hidden={!isFetching}
      height='100%'
      justifyContent='center'
      alignItems='center'>
      <ActivityIndicator busy />
    </FlexboxLayout>
    <StackLayout hidden={isFetching}>
      <Label>Hello 🥰</Label>
    </StackLayout>
  </>
);

列表渲染

为了显示项目列表，建议使用 ListView 组件，它实现虚拟列表行为，仅在视口内部渲染项目。当然，您也可以通过 map 使用常规渲染，但 NativeScript 在性能上对应用程序中的元素数量以及从树中插入和删除它们非常敏感。因此，应尽可能使用虚拟化。

import { ListView } from '@dark-engine/platform-native';
return (
  <ListView
    height='100%'
    items={items}
    onItemTap={() => console.log('tapped!')}>
    {({ item, idx }) => {
      return (
        <StackLayout backgroundColor={idx % 2 ? 'red' : 'yellow'}>
          <Label color={idx % 2 ? 'white' : 'black'}>item #{item}</Label>
        </StackLayout>
      );
    }}
  </ListView>
);

连接第三方插件

在现代化开发中，我们很少能没有其他开发者编写的第三方包。因此，我们应该始终能够将此类插件包含到我们的项目中。

假设您想连接一个第三方轮播插件 @nstudio/nativescript-carousel

首先，您必须从 npm 中在您的应用程序中安装它

npm i @nstudio/nativescript-carousel

然后，要注册一个新元素，您需要使用 registerElement 函数

import { component } from '@dark-engine/core';
import { registerElement, factory } from '@dark-engine/platform-native';

registerElement('ns:carousel', () => require('@nstudio/nativescript-carousel').Carousel);
registerElement('ns:carousel-item', () => require('@nstudio/nativescript-carousel').CarouselItem);

type CarouselProps = {};
type CarouselItemProps = {};

const carousel = factory('ns:carousel');
const Carousel = component<CarouselProps>(props => carousel(props));

const carouselItem = factory('ns:carousel-item');
const CarouselItem = component<CarouselItemProps>(props => carouselItem(props));

export { Carousel, CarouselItem };

完成所有这些后，可以像这样使用新的插件：

import { Label } from '@dark-engine/platform-native';
import { Carousel, CarouselItem } from '@my-ui-kit';

return (
  <Carousel height='100%' width='100%'>
    <CarouselItem id='slide1' backgroundColor='red'>
      <Label text='Slide 1' />
    </CarouselItem>
    <CarouselItem id='slide2' backgroundColor='blue'>
      <Label text='Slide 2' />
    </CarouselItem>
    <CarouselItem id='slide3' backgroundColor='green'>
      <Label text='Slide 3' />
    </CarouselItem>
  </Carousel>
);

模态框

要将内容插入模态窗口，您需要使用一个特殊的组件 Modal

import { Modal } from '@dark-engine/platform-native';
const [isOpen, setIsOpen] = useState(false);

return (
  <Modal isOpen={isOpen} animated onRequestClose={() => setIsOpen(false)}>
    <StackLayout padding={32}>
      <Label>Hello from Modal</Label>
    </StackLayout>
  </Modal>
);

其他组件

Dark 包含其他类型为 View、Text、TouchableOpacity 的组件，因此您可以以几乎类似于 React Native 的风格编写应用程序。

import { component } from '@dark-engine/core';
import { View, Text, TouchableOpacity } from '@dark-engine/platform-native';

const App = component(() => {
  return (
    <View justifyContent='center'>
      <TouchableOpacity padding={32} backgroundColor='#4caf50' onPress={() => console.log('press')}>
        <Text textAlignment='center'>Press me</Text>
      </TouchableOpacity>
    </View>
  );
});

导航

任何更复杂的应用都需要分为几个页面并在它们之间进行导航。Dark提供了一组名为@dark-engine/native-navigation的包，它通过使用StackNavigator和TabNavigator实现导航。此路由器还支持动画过渡、嵌套导航和参数传递。

import { NavigationContainer, StackNavigator } from '@dark-engine/native-navigation';

const App = component(() => {
  return (
    <NavigationContainer defaultPathname='/Feed'>
      <StackNavigator.Root>
        <StackNavigator.Screen name='Feed' component={Feed} />
        <StackNavigator.Screen name='Friends' component={Friends} />
        <StackNavigator.Screen name='Profile' component={Profile} />
        <StackNavigator.Screen name='Settings' component={Settings} />
      </StackNavigator.Root>
    </NavigationContainer>
  );
});

有关此包的完整文档，您可以在这里找到：此处。

许可协议

MIT © Alex Plex