[React Native]介绍了Native Base


本机库

NativeBase是React Native中可用的UI组件。它为iOS / Android提供了合适的UI，并且可以轻松引入通用组件。

https://github.com/GeekyAnts/NativeBase

环境

使用以下命令为创建的项目安装NativeBase。

1
$ npm install native-base --save

将显示以下消息，并完成安装。

1
2
3
4
5
┌────────────────────────────────────────────────────────────────────────────────────────────┐
│ NativeBase 2.0 has been succesfully installed!                                             │
│ Run `node node_modules/native-base/ejectTheme.js` to copy over theme config and variables. │
│ Head over to the docs for detailed information on how to make changes to the theme.        │
└────────────────────────────────────────────────────────────────────────────────────────────┘

*在官方网站上应该可以，但是在随后的工作中不起作用，因此似乎可以通过再次执行以下命令最终完成安装。

1
$ npm install

接下来，使用以下命令为iOS / Android项目指定NativeBase"需要链接"。

1
$ react-native link

参考："反应本地链接"有什么作用？
https://qiita.com/lazyppp/items/8d5969cd9a5b53587e18

应用程式建立

如下重写

App.js并检查NativeBase组件是否可用。 (尝试使用" Header组件"在iOS上显示导航栏，在Android上显示应用栏)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, {Component} from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body>
            タイトル
          </Body>
          <Right>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

的iOS

ios.png

安卓

android.png

资料库

本文创建的一个发布在下面，因此请参考它。
https://github.com/k-neo/ReactNativeCourseNativebase