NaveBase V 3を使用して正しい方法!

NtiveBase V 3のリリース以来、それは多くの開発者によって彼らのクールなアプリを構築し、ライブラリの共同創作者として使用されている、あなたはいつもどのようにコミュニティがそれを使用して知っている好奇心旺盛です.私たちは開発者に話しているとフィードバックをどのようにnativebase v 3を使用するを参照してください.私たちは多くの人々がその最大限にV 3を利用していないことを認識し、それを超複雑にする.実際、それはあなたが考えるより単純です.
このバージョンは、どのようにネイティブだけでなく、Webプラットフォーム上で実行されるアプリケーションを作るためにアプローチする必要がありますどのように完全な哲学的な変化に基づいているので、我々はNtiveBaseを使用している間、美しく、効率的なUIを作成するのV 3の哲学を採用する方法についての入門ガイドを書いた.
以下の6つのセグメントを見ています.

プロジェクトの設定

ユーティリティ小道具とスタイルシートAPI

単一のソースからのインポート

疑似小道具を考える

フックを最大限に利用すること

厳格モード

プロジェクトの設定
新しいプロジェクトを作成してNativeBaseを使用する場合は、コンポーネントライブラリに付属するテンプレートを使用することをお勧めします.これは、多くの時間を節約するだけではなく、それはどのように光と暗いモードを使用すると、編集することができますまたはあなたの要件に基づいて削除するカスタムテーマの設定の一見と一緒に実装することができますを通して見て良い出発点です.
EXPO、CRAのテンプレートを設定するためのコマンドは、ネイティブと次の反応.JSプロジェクトはあなたの参考のために以下に与えられます.
EXPOプロジェクトでテンプレートを実装するには、次のコードを使用します.

# JavaScript
expo init my-app --template expo-template-native-base

# Typescript
expo init my-app --template expo-template-native-base-typescript

Create Appプロジェクトでテンプレートを実装するには、次のコードを使用します.

# JavaScript
npx create-react-app my-app --template nativebase

# Typescript
npx create-react-app my-app --template nativebase-typescript

Responseネイティブプロジェクトでテンプレートを実装するには、次のコードを使用します.

# Javascript
npx react-native init my-app --template react-native-template-native-base

# Typescript
npx react-native init my-app --template react-native-template-native-base-typescript

NextJSプロジェクトにテンプレートを実装するには、次のコードを使用します.

# Javascript
yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base

# Typescript
yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript

All the templates on NativeBase v3 come with a customTheme setup using which you can customise themes very easily.

ユーティリティプロップ対スタイルシートAPI
我々は非常に以上のユーティリティの小道具を使用するNtiveBaseのすべてのユーザーをお勧めしますStyleSheets どこまで彼らはできます.
NativeBaseコンポーネントは、使用のためのユーティリティ小道具のトンを受け入れます.それらのリストを見つけることができますhere .
の例を見てみましょう.

あなたが反応ネイティブを使うほうを選ぶならばStyleSheet , 下記のコードを参照

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  return (
        // The code looks cleaner here but it's really hard to tell what is what and how that component would look.
    <View style={styles.container}>
      <View style={styles.card}>
      <View style={styles.row}>
        <Text style={styles.subHeading}>Business</Text>
        <Text style={styles.period}>1 month ago</Text>
        </View>
        <Text style={styles.heading}>Marketing License</Text>
        <Text style={styles.paragraph}>
          Unlock powerfull time-saving tools for creating email delivery and
          collecting marketing data
        </Text>
        <Text style={styles.link}>Read More</Text>
      </View>
    </View>
  );
}

// You need to switch back and forth to understand which component has which style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#374151',
  },
  card: {
    width:296,
    backgroundColor: '#f9fafb',
    padding: 20,
    borderRadius: 8,
  },
  paragraph: {
    marginTop: 8,
    fontSize: 14,
    fontWeight: 'medium',
    color: '#6b7280',
  },
  period:{
    fontSize:10,
    color:"#a1a1aa"
  },
  heading:{
    marginTop:12,
    fontSize:20,
    fontWeight:500
  },
  link:{
    marginTop:8,
    color:"#0891b2",
    fontWeight:"medium",
    fontSize:12,
  },
  subHeading:{
    fontSize:12,
    color:"#71717a"
  },
  row:{
    flexDirection:'row',
    justifyContent:"space-between",
    alignItems:"flex-start"
  }
});

エキスポスナックhttps://snack.expo.dev/pu9jBPcut

今、同じUIは、そのユーティリティ小道具を使用してnativebase上で実装することができます.以下のコードを参照ください.

import React from 'react';
import {
  Center,
  NativeBaseProvider,
  HStack,
  Box,
  Text,
  Spacer,
} from 'native-base';

export default () => {
  return (
        // Though it doesn't look as slick as the previous example but try reading the code.
    <NativeBaseProvider>
      <Center flex={1} bg="coolGray.700">
            {// Every line of code is so much intuitive, one can easily understand what it does.}
        <Box bg="blueGray.50" p="5" w="296" rounded="8">
          <HStack alignItems="flex-start">
            <Text fontSize="12" color="gray.500" fontWeight="medium">
              Business
            </Text>
            <Spacer />
            <Text fontSize="10" color="gray.400">
              1 month ago
            </Text>
          </HStack>
          <Text mt="3" fontWeight="medium" fontSize="20">
            Marketing License
          </Text>
          <Text mt="2" fontSize="14" color="gray.500">
            Unlock powerfull time-saving tools for creating email delivery and
            collecting marketing data
          </Text>
          <Text mt="2" fontSize="12" fontWeight="medium" color="cyan.600">
            Read More
          </Text>
        </Box>
      </Center>
    </NativeBaseProvider>
  );
};

エキスポスナックhttps://snack.expo.dev/AGNgFxZ4L
ユーティリティ小道具の利点は以下の通りです.

大量生産性向上

より良いコード読みやすさ

スタイル名を覚えておく必要はありません

再利用可能なスタイルシートの代わりに再利用可能なコンポーネントの作成に重点を置いて

テーマトークンを使用します.

Alternatively, you can use Utility Props in StyleSheet APIs by creating objects of utility props and spreading them even through this method is not recommended.

単一のソースからのインポート
私たちは、あなたがあなたを開発して、我々を通して彼らを通過したとき、一般に必要であるかもしれないCore ResponseFactory 関数は、単一のソースからインポートするために.このアクションは、NatieBaseが他のラインから新しいコンポーネントをインポートしなければならない心配なしで提供しなければならないすべての良いものを詰めるのを助けます.
NativeBase V 3を使用している場合は、NativeBaseライブラリから次のコンポーネントを使用することをお勧めします.

import {
    ScrollView,
    View,
    KeyboardAvoidingView,
    StatusBar,
    FlatList,
    SectionList
} from 'native-base';

コンポーネントは以下のドキュメントリンクとともに表示されます.

ScrollView - https://docs.nativebase.io/scrollview

View - https://docs.nativebase.io/view

KeyboardAvoidingView - https://docs.nativebase.io/keyboard-avoiding-view

StatusBar - https://docs.nativebase.io/status-bar

FlatList - https://docs.nativebase.io/flat-list

SectionList - https://docs.nativebase.io/section-list

疑似小道具について考える
我々は、NATIOBASEで、技術コミュニティのために開発経験をより簡単にすることについて多くの考えを置きました.その考えを拡張するために、我々はいくつかの擬似小道具を提供しました.いくつかの例でこれを理解しましょう.

カラーモード擬似小道具
NtiveBaseは、現在のテーマとカラーモードであるかどうかをチェックするフックを提供しますLight or Dark , しかし、これはフックをインポートするの面倒が、それを呼び出して、条件付きの色モードなどをチェックすることができます退屈です.
代わりに、ちょうどあなたの小道具を追加することができます_light and _dark 擬似小道具とNativeBaseは、関連するカラーモードのみに基づいてそれらの小道具を適用します.この例を確認しましょう.

この例では、aを持っている必要があるボタンがあると仮定しましょうbackgroundColor = 年の「第一次light mode とデフォルトの背景色dark mode .

条件付では、テキスト色はdark mode とデフォルトlight mode .

フックを使用して現在のテーマとカラーモードをチェックするには、次のコードを使用します

import React from 'react';
import {
  Button,
  Center,
  useColorMode, // Step 1 Importing the hook
  NativeBaseProvider,
} from 'native-base';

export function TestApp() {
  const { colorMode } = useColorMode(); // Step 2 Calling the hook
  return (
    <Button
      bg={ colorMode==="light" ? "primary.500" : "primary.400" } // Step 3 Conditionally applying props
      _text={ colorMode==="light" ? { color: "primary.800" } : "white" } // Step 3 Conditionally applying props
    >
      Button
    </Button>
  );
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <TestApp />
      </Center>
    </NativeBaseProvider>
  );
};

現在のテーマとカラーモードを使用して_light and _dark 疑似小道具

import React from 'react';
import {
  Button,
  Center,
  NativeBaseProvider,
} from 'native-base';

export function TestApp() {
  return (
    <Button
      _light={{ bg: 'primary.500' }} // Step 1 Conditionally pass props to _light and _dark
      _dark={{ _text: { color: 'primary.800' } }}
    >
      Button
    </Button>
  );
}

export default () => {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <TestApp />
      </Center>
    </NativeBaseProvider>
  );
};

次に、上記のコードを実行する.この例を使用すると、簡単にどのようにこれらの擬似小道具は、開発者がはるかに楽にするために使用できるかを理解することができます:


プラットフォーム擬似小道具
このように、プラットフォームに基づいてあなたの構成要素に条件付きの小道具を渡すようにしてください.OS

<Input 
    numberOfLines={ Platform.OS==="android" ? "4" : null } 
    width={ Platform.OS==="web" ? "48" : "80%" } 
/>

さて、それはもはやNoveBaseの最新バージョンでは問題ではない!簡単に使えます_web , _android and _ios 小道具とは、特定のプラットフォームに関連性を渡すと、行くには良いです.

<Input _android={{ numberOfLines: 4 }} _web={{ width: "48" }} width="80%" />

プラットフォームの小道具は、特定のプラットフォームが優先順位
NavieBase上のより多くの偽小道具は、我々は、それらを実装するための入門ガイドと一緒に今後のブログでカバーします.またあなたに会いたいです!

フックを最大限に活用すること
NtiveBaseもあなたのアプリケーションを超高速に構築するための使いやすいカスタムフックの多くが付属していますので、心の中ですることができますそれらを使用するように保管してください.
例えば、その実装方法を見てみましょうuseDisclose フック.以下のコードを参照ください.

import React from "react";
import {
  Modal,
  Button,
  Center,
  useDisclose,
  NativeBaseProvider,
} from "native-base";

function UseDiscloseExample() {
    // handles common open, close, or toggle scenarios
  const { isOpen, onOpen, onClose } = useDisclose();
    // no need to create your own state and helper functions
  return (
    <>
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Content>
          <Modal.CloseButton />
          <Modal.Header fontSize="4xl" fontWeight="bold">
            Hello World
          </Modal.Header>
          <Modal.Body>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos quasi
            cupiditate expedita, ipsa corporis officia totam similique delectus!
            Debitis esse, ea blanditiis iste enim iure at odit fugiat autem.
            Accusamus?
          </Modal.Body>
          <Modal.Footer>
            <Button colorScheme="blue" mr="1">
              Save
            </Button>
            <Button onPress={onClose}>Close</Button>
          </Modal.Footer>
        </Modal.Content>
      </Modal>
      <Button onPress={onOpen}>Open Modal</Button>
    </>
  );
}
export default function () {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <UseDiscloseExample />
      </Center>
    </NativeBaseProvider>
  );
}

もう一つの重要なフックはuseBreakpointValue これは現在のブレークポイントの値を返します.以下のコードを参照ください.

import React from 'react';
import { Box, useBreakpointValue, NativeBaseProvider, Center } from 'native-base';
function UseBreakpointValueExample () {
    // the value of color will change based on the screen sizes.
  const color = useBreakpointValue({
    base: 'red.200',
    sm: 'blue.200',
    md: 'blue.200',
  });
  return (
    <Box bg={color} w={'100px'}>
      This is a box
    </Box>
  );
};
export default function () {
  return (
    <NativeBaseProvider>
      <Center flex={1}>
        <UseBreakpointValueExample />
      </Center>
    </NativeBaseProvider>
  );
}

以下はDocsと一緒の他のフックのリストです.

useDisclose - https://docs.nativebase.io/use-disclosure

useBreakpointValue - https://docs.nativebase.io/use-breakPoint-value

useClipboard - https://docs.nativebase.io/use-clipboard

useMediaQuery - https://docs.nativebase.io/use-media-query

useTheme - https://docs.nativebase.io/use-theme

useToken - https://docs.nativebase.io/use-token

useColorMode - https://docs.nativebase.io/use-color-mode

useColorModeValue - https://docs.nativebase.io/use-color-mode-value

useContrastText - https://docs.nativebase.io/use-contrast-text

useAccessibleColors - https://docs.nativebase.io/use-accessible-colors

厳格モード
NativeBase V 3はまた、アプリケーション開発環境の厳格さのレベルを制御することができます厳格なモードがあります.あなたのCodeBaseを通して最高の実行を維持する本当に便利なツール、厳格なモードは、あなたのNoveBase構成設定に渡すことができる構成です.それは3つの値をとります.error , warn and off , その中からoff デフォルトでは.あなたの選択されたオプションに基づいて、それはあなたが適切な使用している場合、プロジェクトとチェックのすべての支柱を通過しますtoken values からtheme 通過するだけでstring 小道具の値.この条件が満たされない場合は、エラー/警告をスローします.
あなたが以前にユーティリティ小道具に番号を渡すのに用いられるならば、バージョン3.2.0がジレンマを引き起こすかもしれない新しいトークン価値があるので、ストリングトークンを使ってください.以下のコードを参照ください.

// If you previously had something like this in your code
<Box p={4} mx={3} my="12px" bg="primary.400" width="50%" >
    Hello World
</Box>

// Then now the correct way would be
<Box p="4" mx="3" my="3" bg="primary.400" width="1/2" >
    Hello World
</Box>

結論
これは最高の方法でnativebaseの最新機能を利用する方法についての私達の導入をラップします.その最新の改善では、NativeBaseは、以前よりもはるかにカスタマイズ可能なコンポーネントを作成するために使用することができます.私はこの記事は、V 3が付属している新しい機能を試してみることを要求し、我々はあなたがNoveBaseが提供している豊富なコンポーネントライブラリを使用して美しいアプリケーションを作成するために将来的にあなたのためのより多くのガイドを持っているでしょう願っています.
によって私たちの不和のチャンネル上の実験について教えてくださいclicking here .