react 让滚动条一直在下面_Ink 2.0 发布:命令行应用程序的 React

作者 | Bethany Griggs、Michael Dawson译者 | 无明

自称为“命令行接口 React”的 JavaScript 库 Ink 最近发布了第二个主要迭代版本。借助 Ink,开发者可以通过组装 React 组件来构建命令行应用程序,并充分利用他们的 React 知识和 React 生态系统。

Ink 是一个 React 渲染器,可以将 React 组件树转成字符串,然后输出到终端上。Ink 2.0 可以无缝支持 React 的某些特性,比如 Hooks 或 Context,还可以与 React 生态系统中的其他重要组件(比如 Redux)发生交互。

官方文档提供了如下的示例:

import React, {Component} from 'react';

终端上的输出:

a32b6a3233b612739c85a3a8e8a75281.png

Ink 2.0 提供了 7 个内置的组件。还有其他 10 个第三方组件也可用于开发终端应用程序,以及 14 个组件正在迁移到 Ink 2.0。这些可重用的组件提供了常用的终端用户界面布局和行文(文本输入框、进度条、微调器、确认输入框、滚动条、自动完成、文本动画、图像显示等)。这些组件也解决了其他一些较受关注的问题,比如链接、路由、动画和颜色。

Ink 2.0 使用了 Yoga,一个实现了 Flexbox 的跨平台布局引擎。所以,每个元素就是一个 Flexbox 容器,可以使用相关的 Flexbox 参数(flexShrink、flexGrow、flexDirection 等等)。内置组件 Box 可用于配置布局。下列的组件:

import {render, Box, Text, Color} from 'ink';

将在终端上显示:

ba6292c648cf1a10505fdc8d09bad008.png

可以使用 ink-testing-library 来测试 Ink 组件。这个库的灵感来自 react-testing-library,一个可替代 Jest 来测试 React 组件的框架。可以像下面这样测试一个计数器应用程序:

import React from 'react';

终端应用程序和命令行应用程序之间有一个区别。终端应用程序具有图形化用户界面,可能带有复杂的导航和输入功能。

基于 blessed 终端界面库构建的 React-blessed 可以让应用程序变成下面这样:

2d722634e0da031a42049f91b5c77c99.png

Ink 旨在简化命令行应用程序的界面,提供更简单的输入功能:

1c26564e30f8d123e614a38baed5174a.gif

Ink 采用了 MIT 开源协议。开发者可以通过其 GitHub 主页贡献代码:

https://github.com/vadimdemedes/ink

查看英文原文:

https://www.infoq.com/news/2019/04/ink-react-command-line-app

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值