@aaxis/native-base 中文文档教程

Question

NativeBase

React Native 的基本跨平台 UI 组件

更新文档 此处！

Table of Content

1. What is NativeBase?
2. Why NativeBase?
3. KitchenSink App
4. Getting Started
5. Components
6. NativeBase for Web
7. Compatibility Versions
8. React Native Seed
9. NativeBase Market
10. Documentation
11. Website
12. Quick Links to NativeBase
13. About the creators

1. What is NativeBase?

NativeBase 是一个时尚、巧妙且动态的前端框架，由 Geekyants.com 上充满激情的 React Loving 团队创建，用于构建跨平台 Android & iOS 移动应用程序使用准备好使用 React Native 的通用组件。

2. Why NativeBase?

NativeBase 的真正优点在于您可以使用共享的 UI 跨平台组件，这将大大提高您的工作效率。 使用 NativeBase 时，您可以开箱即用地使用任何本机第三方库。

由 Microsoft 推荐

如果您希望开始使用 React Native + CodePush，并且正在寻找一个很棒的入门工具包，您应该查看 Native Starter Pro - 微软的 react-native-code-push repo

Awesome React Native 推荐

NativeBase 添加到 Awesome React Native 的 Frameworks 列表中，也被许多其他 React 爱好者使用世界。

4. Getting Started

一个。 使用纯 React Native 应用程序进行设置

安装 NativeBase：

npm install native-base --save

安装 Peer Dependencies：
任何 npm 包中包含的对等依赖项不会自动安装。 您的应用程序不会明确依赖于它。

react-native link

注意：如果您使用的是 react-native 0.60 或更高版本，则不需要链接任何包。

您已经使用 React Native 成功设置了 NativeBase 应用程序。 您的 React Native 应用程序现已全部设置为在 iOS 和 Android 模拟器上运行。

<强>b。 使用 Expo 设置

Expo 可帮助您在没有构建配置的情况下制作 React Native 应用程序。 它适用于 macOS、Windows 和 Linux。
有关 Expo 的更多信息，请参阅此链接

安装 NativeBase：

npm install native-base --save

注意
NativeBase 使用一些可以使用 Font.loadAsync 加载的自定义字体。 查看 Expo 字体文档。

安装 Expo 字体：

expo install expo-font

App.js

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

查看 KitchenSink 与 Expo 的实施示例。
在此处找到KitchenSink 存储库

c。 使用 ignite-native-base-boilerplate 设置

如果您有 Ignite CLI 安装。

ignite new appname --boilerplate native-base-boilerplate

转到应用程序位置：

cd appname

对于 iOS 运行：

react-native run-ios

对于 Android 运行：

react-native run-android

参考 ignite-native-base-boilerplate 页面了解更多信息。

5. Components

NativeBase 由称为组件的有效构建块组成。 组件是在纯 React Native 平台以及一些具有丰富的可自定义属性集的 JavaScript 功能中构建的。 这些组件可以让您快速构建完美的界面。

6. NativeBase for Web

NativeBase 现在可供 React 网络爱好者使用。 查看演示。 在此处找到存储库。

7. Compatibility Versions

NativeBase	React Native
v0.1.1	v0.22 to v0.23
v0.2.0 to v0.3.1	v0.24 to v0.25
v0.4.6 to v0.4.9	v0.26.0 - v0.27.1
v0.5.0 to v0.5.15	v0.26.0 - v0.37.0
v0.5.16 to v0.5.20	v0.38.0 - v0.39.0
v2.0.0-alpha1 to v2.1.3	v0.38.0 to v0.43.0
v2.1.4 to v2.1.5	v0.44.0 to v0.45.0
v2.2.0	v0.44.0 to v0.45.0
v2.2.1	v0.46.0 and above
v2.3.0 to 2.6.1	v0.46.0 and above (does not support React 16.0.0-alpha.13)
v2.7.0	v0.56.0 and above

8. React Native Seed

React Native Seed 使用您喜爱的技术为您的基础应用程序提供 React Native 入门套件。

根据我们从用户那里收到的反馈，人们在使用所需技术为他们整理出合适的样板文件时遇到了困难，因此联系我们进行咨询。 我们意识到许多人对他们想要在应用程序中使用的技术很挑剔，并且需要一个最小的、简洁的解决方案来解决这个问题，因此需要 React Native Seed。

React Native Seed 适用于学习者和专业人士，那些想要试验、学习所有方面的人以及那些已经足够了解的人，只是想要一个入门工具包来快速开始他们的项目。

9. NativeBase Market

试用过免费版本 Native Starter Kit 并欣赏我们的产品？

借助 NativeBase 的特色应用走上移动快车道，构建高质量的 iOS 和 Android 移动应用。
一个市场，用于构建优质的 React Native 应用主题，以构建高质量的 iOS 和 Android 移动应用。

10. Documentation

浏览 NativeBase Docs 以使用 NativeBase。

11. Website

https://nativebase.io/

12. Quick Links to NativeBase

• NativeBase Documentation
• NativeBase Blog
• NativeBase on Twitter
• NativeBase on FaceBook

13. About the creators

我们是 GeekyAnts，一家位于印度班加罗尔的初创公司，拥有 50 多名开发人员。 我们在 React / React Native 社区中非常活跃，我们开发了 StrapUI 和 开始反应。 我们的其他产品包括 StartLaravel 和 StartAngular。

我们的另一个主要项目是 BuilderX，这是一个为您编写 React Native 代码的屏幕设计工具。

Contributors

Code Contributors

这个项目的存在要归功于所有做出贡献的人。 [贡献]。

Financial Contributors

成为财务贡献者并帮助我们维持我们的社区。 [贡献]

Individuals

Organizations

与您的组织一起支持这个项目。 您的徽标将显示在此处，并带有指向您网站的链接。 [贡献]