セットアップバニラは、原型とネイティブ反応

しようとすると、簡単な反応のネイティブのスクリプトプロジェクトを作成するには、鐘や口笛を使用するときには、テンプレートやボイラー板を使用して取得すると、挑戦することが見られ、ほとんどすべてのチュートリアルでは、これらの手順を鮮やかにカバーしています.
だから、私はこのブログの記事を作成し、問題を解決する上で強調表示されている間、それを楽しみながら、あなたもそれをお楽しみいただけます!

反応ネイティブとタイプスクリプトについての少しのバックストーリー

ネイティブの反応は、Web開発者は、既存のJavaScriptの知識を使用して堅牢なモバイルアプリケーションを作成することができますエキサイティングなフレームワークです.それはより高速なモバイル開発を提供し、エンドユーザーの経験やアプリケーションの品質を犠牲にせずに、IOS、Android、およびWeb間でより効率的なコードの共有を提供しています.
これは、ユーザーのインターフェイスを構築するためのFacebookのJavaScriptライブラリの反応に基づいていますが、ブラウザをターゲットにする代わりに、モバイルプラットフォームを対象としています.
Web開発者は、今見て、本当に“ネイティブ”を感じるモバイルアプリケーションを書くことができます.さらに、あなたが書くコードの大部分がプラットホームの間で共有されることができるので、反応するネイティブは同時にAndroidとIOSの両方のために開発するのを簡単にします.
TypesScriptは、単一のオープンソースコンパイラを持ち、単一のベンダーによって主に開発されたJavaScript言語のスーパーセットです:マイクロソフト.TypesScriptの目標は、タイプシステムを介して早期にキャッチミスを支援し、JavaScriptの開発をより効率的にすることです.

要件

JavaScriptの基礎知識

反応の基礎知識

CLIコマンドの実行に関する基礎知識

ノード.あなたのマシンにインストールされている

あなたのマシンにインストールされたXcodeまたはAndroid Studio

Native Responseによるいくつかの経験

始める

最初のステップは、プロジェクトをインストールして初期化することです.このコマンドを端末で実行するには、次のコマンドを実行します.

npx react-native init Foobaz 

上記のコマンドは、JavaScriptファイルを実行するための基本的なセットアップでfoobazという名前のプロジェクトを作成します.
ここでプロジェクトを設定したので、ここではボックスから取得します.

ここで作成されたプロジェクトは、純粋なJavaScriptファイルまたはソースコードのためのベアボーン構造を与えます.
それで、私たちはtypescriptを統合しなければなりません.

インテグレート

次のことは我々のアプリに入力スクリプトを追加することです.これらのパッケージを追加する@types/react @types/react-native react-native-typescript-transformer と我々のアプリに統合:

yarn add typescript -D @types/react @types/react-native  react-native-typescript-transformer

.ts デフォルトのファイル拡張子.tsx を含むファイルに使用される特殊な拡張モジュールですかJSXこれらのパッケージをインストールしたので、プロジェクトのルートで、このファイルの名前を変更しますApp.js to App.tsx , それで、私たちは、タイプスクリプトコードを書くことができて、コンパイラに我々のソースコードを変えさせます.
コンパイラは、我々が何をするかを言うまで、我々に援助の役に立ちません.タイプスクリプトでは、これらの規則は特別なファイルtsconfig.json .
を加えましょうtsconfig.json プロジェクトのルートでファイルを作成し、次のコンテンツをペーストします.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

ソースコードのコンパイル

我々の中でApp.tsx ファイルは、そこに1つの下にあるソースコードを置き換えることができますが、ここで我々はユーザーのリストをプルし、我々のアプリで表示するためにフェッチAPIを使用している.

import React from 'react';
import {useState, useEffect} from 'react';
import {
  FlatList,
  ActivityIndicator,
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  Pressable,
  Image,
} from 'react-native';


type DataItem = {
  id: string;
  first_name: string;
  last_name: string;
  email: string;
  avatar: string;
};


const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState<DataItem[]>([]); //set the type of what the hook expects to be an array of DataItem.

  useEffect(() => {
    fetch('https://reqres.in/api/users?page=2')
      .then(response => response.json())
      .then((responseJson: {data: any}) => {
        setIsLoading(false);
        setDataSource(responseJson?.data);

      })
      .catch(error => {
        setIsLoading(false);
        // do something with the error...
      });
  }, []);

  if (isLoading) {
    return (
      <View
        style={{flex: 1, padding: 20, marginTop: 40, backgroundColor: 'white'}}>
        <ActivityIndicator />
      </View>
    );
  }
  return (
    <SafeAreaView
      style={styles.safeArea}>
      <FlatList
        data={dataSource}
        renderItem={({item}) => (
          <Pressable
          onPress={() => null}
          style={styles.cardContainer}>
          <View
            style={styles.cardContent}>
            <Image
              source={{uri: item?.avatar}}
              style={styles.avatar}
            />
            <View>
              <Text style={{color: '#000'}}>{item?.first_name} {item?.last_name}</Text>
            </View>
          </View>
        </Pressable>
        )}
        keyExtractor={({id}, index) => id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: 'white',
    flex: 1,
    marginTop: 80,
    marginHorizontal: 16,
  },
  avatar: {
    height: 60,
    width: 55,
    marginLeft: 16,
    marginRight: 15,
    borderRadius: 35,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardContainer: {
    marginBottom: 10,
    flexDirection: 'row',
    paddingVertical: 16,
    backgroundColor: '#EEEFF2',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8,
    shadowColor: '#EEEFF2',
    shadowRadius: 50,
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.1,
    elevation: 5,
  },
  cardContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  }
});

export default App;

我々の中でApp.tsx オンラインで15 APIエンドポイントから期待されるユーザリストを定義するデータ型を構築します.
オンラインで25 我々は、データがロードされているかどうかをチェックする条件付きレンダリングのUSENTフックを宣言します.
オンラインでも26 我々のUIにレンダリングするために我々のデータを保持するUSENTフックを宣言します.私たちはフックがDataItem .
オンラインで53 我々は、我々のUIを表示するには、反応ネイティブパッケージに組み込まれているフラットリストコンポーネントを使用します.
FlatList は、最小限の労力でデータのリストをレンダリングするために使用されます.

アプリの実行

プロジェクトのルートフォルダにコードエディターから移動し、次のコマンドを実行してUIを構築し、アプリケーションを起動します.

# MacOS
yarn run ios

# Windows/Linux
yarn run android

これは我々のアプリは次のようになります.

Githubのソースコードを表示できますhere

結論

なんと!私達は今すぐやっている.
あなたがチュートリアルを楽しんで、あなたはどんなエラーなしででも続くことができたという望み?
コメントボックスのチュートリアルについてのコメントやご提案に感謝します.
また、あなたはTwitterやLinkedInで私に到達することができます
読書ありがとう.