NativeBase 安裝設定

安裝前說明

NativeBase 是一個免費的開源UI組件庫：https://docs.nativebase.io/
NativeBase 和 RN 的組件有很多是重名的，導入時要特別注意。
組件文件說明：https://docs.nativebase.io/Components.html#Components
NativeBase-KitchenSink 展示 NativeBase 組件：
- 也可不裝，直接看文件的 gif 動畫展示。但安裝後的範例才完整。
- https://nativebase.io/kitchen-sink-app 依 github ，安裝執行
- 在windows 安裝，正常會有很多錯誤，可依下方提示排除
- 安裝後，內部有各頁面的程式碼，可依需求使用

// node v12 在安裝 kitchen-sink-app 最後一步驟
// react-native link react-native-vector-icons 
// 會出現錯誤 node_modules\metro-config\src\
// defaults\blacklist.js:34
// 修改方式如下

It appears in \node_modules\metro-config\src\
defaults\blacklist.js, 


var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
to:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

// 顯示如下錯誤的解決方法
// Error: Unable to resolve module `react-native-gesture-handler`
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler

Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac' 

I am fixing a incompatibility issue related to 
AndroidX by adding 2 lines to gradle.properties under android for my RN 0.59.5 project.

android.useAndroidX=true
android.enableJetifier=true

// Task :app:checkDebugClasspath
// Failed to resolve variable '${animal.sniffer.version}'
// 上述錯誤的解法是操作 android studio 
// 開啟資料夾內的 android 專案
//執行下方動作
File -> Invalidate Caches / restart...

// 專案可能還需要手動更新版本，避免其它的錯誤
// 若出現下方的錯誤，可以先開啟 AVD manager 內的模擬器
// Task :app:installDebug FAILED
//com.android.builder.testing.api.DeviceException: No connected devices!

// 開啟
yarn start

安裝設定

// 先初始化 react native 專案
npx react-native init <project-name>

//安裝元件
npm install native-base --save

// 連結原生的環境，React Native 0.60 之前要手動連結
react-native link

安裝後若顯示不存在module的錯誤。可嘗試把node_modules的資料夾刪除，再用npm install命令，重新安裝所有的依賴庫。

頁面佈局

NativeBase 的所有組件都放在 <Container> 中，內有容器組件 <Header>, <Content>, <Footer>

//官網展示

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Header</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Text>
            This is Content Section
          </Text>
        </Content>
        <Footer>
        // 手機的 footer 大多會放置快捷鍵
          <FooterTab>
            <Button full>
              <Text>Footer</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

Previous進階應用 NextNativeBase 特殊組件簡介

Last updated 3 years ago