Hello World

 

使用官方推荐的create-ink-app来创建脚手架。

 

 mkdir my-fancy-cli

 

 cd my-fancy-cli

 

 npx create-ink-app

 

创建并下载完依赖之后，可以尝试一下

 

 my-fancy-cli --help

 

 ​

 

 Usage

 

   $ my-fancy-cli

 

 ​

 

 Options

 

       --name  Your name

 

 ​

 

 Examples

 

   $ my-fancy-cli --name=Jane

 

   Hello, Jane

 

如果加上参数

 

 my-fancy-cli --name=lianli

 

 Hello, lianli

 

其中名字会被渲染为绿色

 

它有默认的参数

 

 my-fancy-cli

 

 Hello, Stranger

 

通过观察代码发现，渲染出来的是如下这个组件

 

 const App = （{name}） => （

 

     <Text>

 

         Hello, <Color green>{name}</Color>

 

     </Text>

 

 ）;

 

也就是说我们可以通过React组件，向Console里输出UI，于是React又多了一个新的战场。

 

显示组件

 

Box

 

接下来就看看Ink具体能有哪些武器来上战场。

 

首先<Box>用来渲染出一个容器，它的参数很多，下面看一个综合的实例

 

 const App = （） => （

 

     <Box height={6} flexDirection="column" width={10}>

 

         <Box height="50%" paddingTop={1}>

 

             X

 

         </Box>

 

         Y

 

         <Box textWrap="truncate-middle">Hello World</Box>

 

     </Box>

 

 ）;

 

Color

 

<Color>用来渲染颜色，主要参数就是用来指定颜色

 

 const App = （） => <Color blue>Hello Ink - Blue</Color>;

 

Text

 

<Text>自然用来渲染文本了，它可以指定字体的样式，但不是所有平台都有效果。

 

const App = （） => （

 

<Color yellow>

 

<Box flexDirection="column">

 

<Text bold>I am bold</Text>

 

<Text italic>I am italic</Text>

 

<Text underline>I am underline</Text>

 

<Text strikethrough>I am strikethrough</Text>

 

</Box>

 

</Color>

 

）;

 

其它的显示组件就不再演示了。

 

Hooks

 

如果只有显式组件，那么Ink的功能还不完整，就像上战场没有子弹一样。它另外还提供了很多趁手的Hooks来辅助。

 

useInput

 

useInput用来捕获用户的输入，用户每按一个键就会触发它的回调，如果用户粘贴多于一个字符的文本，回调也只会被触发一次。

 

 const UserInput = （） => {

 

     useInput（（input, key） => {

 

         console.log（input）;

 

         console.log（key）;

 

     }）;

 

 ​

 

     return <Text>Hello useInput</Text>;

 

 };

 

useApp

 

它就暴露出退出的方法，现在在刚才的例子上加上如果按下q就退出的逻辑。