リアクトネイティブ 0.63.1

Simulattorの最新バージョン(14.0)では、最新バージョンのreact Native 0.63.1イメージコンポーネントが表示されません。13.5以下では正常に動作します。

AwesomeProject ······················ プロジェクト文書
  _test_ ······························ テストフォルダー
│   App-test.js ························ テストファイル
  android ····························· androidコンフィギュレーション・カタログ
│ └── app ················· エントリファイル
  ios ······················· ios 
│ └── AwesomeProject.xcworkspace ..... スタートアップフォルダ
└── README.md ························· 記述式問題の解答と解説

React Nativeのローディング原則。

1. react Nativeの最終出力はindex.jsにあります。
2. index.jsの先頭に目線を移動します。

// react-Native登録されたクラス・コンポーネントを出力する。
import {AppRegistry} from 'react-native';
// reactを使って書かれたコンポーネント。
import App from './App';
// app.jsonプロジェクト名設定ファイル。
import {name as appName} from './app.json';
/**
* 登録クラス・コンポーネントは2つのパラメーターを受け取る。
* アプリ.json 設定されたファイル名。
* もうひとつは、アプリのコンポーネントで構成されるコールバック関数である。
*/ 
AppRegistry.registerComponent(appName, () => App);

1. ios設定ファイルの分析 ディレクトリ IOS -> プロジェクト名 -> name/name/AppDelegate.m

   

概要：app.jsコンポーネントの概要ファイル。index.jsファイルへの最終出力は、プロジェクト・エントリ・ファイルです。androidとIOSはブリッジファイルを通してルートビューを読み込みます。対応するモジュールを探します。

react native

• reactがコンポーネントで使用されているかどうかは関係ありません。導入されていなければエラーが報告されます。
• 開発時に、いくつかのネイティブコンポーネントを呼び出す必要がある場合は、react-nativeが導入されています。
• その他の使い方は、基本的にreactのJSX構文と同じです。
• 画面解像度に応じて自動的に分配される単位はありません
• スタイルは直リンクスタイルとして書くことができます。
• また、変数を介してStyleSheet.create({...})を受け取ることも可能です。を受け取ることも可能です。
• デバッグ IOS コントロールキー + コメントキー デバッガを開きます。

ネイティブサイズとランニングプラットフォーム

flex

1. felxDirection : row | row-reverse | column | column-reverse
* このプロパティは、スピンドルの方向を決定する。 
* row: 主軸は水平で、始点は左端にある。
* row-reverse: 主軸は水平で、始点は右端にある。
* column( : 主軸は上端を起点とする垂直方向である。
* column-reverse: 主軸は垂直方向である。始点は下端にある。
2. justifyContent: flex-start | center | space-between | space-around
* スピンドル内の伸縮アイテムのアライメントを定義する。
* flex-start: 展開項目は行頭に揃えられる。
* flex-endストレッチ項目は行末に向かって整列される。
* center: 伸縮するアイテムは、ラインの中央に向かって整列する。
* space-between端が揃っている。 アイテムは等間隔に並んでいる。
* space-aroundストレッチアイテムは一列に並べられる。両端に半分のスペースが確保されている。

現在のデバイスのサイズを取得します。

1. react Nativeでのディメンジョンのインポート

<Text>
 現在のスクリーンの幅： {Dimensions.get('window').width + '
'}
 現在の画面の高さ： {Dimensions.get('window').height + '
'}
 現在の画面の解像度： {Dimensions.get('window').scale + '
'}
</Text>

1. 現在の実行プラットフォーム。 リアクトネイティブでディメンジョンをインポートします。 この値に基づいてどのプラットフォームであるかを判断し、プラットフォームに基づいて適切な処理を行うことができます。

<Text>
 現在のオペレーティング・プラットフォーム： {Platform.OS}
 </Text>

共通コンポーネント

1. View: コンテナ・コンポーネント。コンポーネントの入れ子にのみ使用できます。
2. テキスト：テキストは必ずテキストで記述してください。自動的に改行されます。行数の設定 その他の機能 APiをご覧ください。
3. Image: uri: 読み込み時に高さと幅を設定する必要があります。
4. ImageBackgroundは背景イメージとして機能します。コンテナとして使用できます。
5. multiline 複数行入力。
6. 通常、ボタンは TouchableOpacity でカプセル化されます。
7. ScrollView Component scroll view Horizontal: true; スクロールすると、データが多いとスクロールが止まってしまいます。
8. FlatList はスクロールするリストに適しています。パフォーマンスを最適化するために、キーと再利用メカニズムに従って最適化されています。
9. 公式には fetch を使ってデータを取得することを推奨しています。axios を使って fetch することもできます。

react-navigation

プロジェクトの初期化：プロジェクトのルート・ディレクトリで以下のコマンドを実行してください。

expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

すでに作成されたプロジェクト

yarn add react-navigation
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-screens@^1.0.0-alpha.23

IOS インストール後

cd ios/
// リアクトをインストールする-navigation接続に必要なプラグイン
pod install
cd ../

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlaout:1.1.0-alpha02'

実行中のエラー：インストールが少ないことが原因です：

yarn add react-navigation-stack
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view
cd ios/
// リアクトをインストールする-navigation接続に必要なプラグイン
pod install
cd ../

ナビゲーター

コンポーネントでのコンテナの作成

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
// import LKWineList from '../components/LKWineList.js';
import LKNet from '../components/LKNet.js';
class HomeScreen extends Component {
 static navigationOptions = {
 title: ' ',
 };
 constructor() {
 super();
 }
 render() {
 return (
 <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => this.props.navigation.navigate('Details')}
 />
 </View>
 );
 }
}
class DetailsScreen extends Component {
 static navigationOptions = {
 title: ' ',
 };
 constructor() {
 super();
 }
 render() {
 return (
 <View
 style={{
 flex: 1,
 backgroundColor: 'red',
 justifyContent: 'center',
 alignItems: 'center',
 }}>
 <Text>Details</Text>
 </View>
 );
 }
}
// createStackNavigatorコンテナを作成し、このコンテナの中にジャンプのすべてのコンポーネントを入れる。
const AppNavigator = createStackNavigator({
 home: HomeScreen,
 my: MyScreen,
});
// このコンテナをcreateAppContainerの中に入れる。
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

画面切り替え

// スタックにこのコンポーネントがあるかどうかを判断し、あればそのページに戻り、なければ新しいコンポーネントを作ってスタックに押し込んで表示する。
this.props.navigation.navigate("コンポーネントのルート名") 
// スタック・プレゼンテーション用の新しいコンポーネントを作成する
this.props.navigation.push("コンポーネントのルート名")
// goBack 前のページに戻る
this.props.navigation.goBack("コンポーネントのルート名")
// ホームコンポーネントへ戻る
this.props.navigation.popToTop("コンポーネントのルート名")

例：ページ間のパラメータ受け渡し

//  
this.props.navigation.push('Details', {
 newId: 'lk001',
 newName: 'アーセナルは広がるかもしれない',
 newTag: ' ',
 }
// パラメータを個別に受け取る
const {navigation} = this.props;
<Text> </Text>
<Text>ID: {navigation.getParam('newId')}</Text>
<Text> : {navigation.getParam('newTag')}</Text>
<Text> : {navigation.getParam('newName')}</Text>
// パラメータ全体の取得
<Text> : {navigation.state.params}</Text>

ルーティングパラメータ固有のコンフィギュレーション：

createStackNavigator({
 //ナビゲート可能な各画面について、以下のように新しいエントリーを作成する：
 Profile: {
 //`ProfileScreen`は画面のメインコンテンツとなるReactコンポーネントだ。
 screen: ProfileScreen,
 //StackNavigatorが`ProfileScreen`そうなれば、次のようなことが可能になる。`navigation` 
 //オプション：ウェブアプリでのディープリンクやリアクトの使用-navigation以下のパスが使用される：
 path: 'people/:name',
 //パスからアクションとルートのパラメーターを抽出する。
 //オプショナル: 画面カバー`navigationOptions`
 navigationOptions: ({ navigation }) => ({
 title: `${navigation.state.params.name}'s Profile'`,
 }),
 },
 ...MyOtherRoutes,
});

ページヘッダータイトルのカスタマイズ 検索: ヘッダーバーの設定

// カスタムタイトル

static navigationOptions = {
 title: 'Home',
 headerStyle: {
 backgroundColor: '#f4511e',
 },
 headerTintColor: '#fff',
 headerTitleStyle: {
 fontWeight: 'bold',
 fontSize: 30,
 },
 headerLeft: () => <Button title=" " onPress={() => alert(' ')} />,
 headerRight: () => (
 <Button title=" " onPress={() => alert(' ')} />
 ),
 };

動的見出し

static navigationOptions = ({ navigation }) => {
 return {
 title: navigation.getParam('otherParam', 'A Nested Details Screen'),
 };
 };

下部ナビゲーションバー

yarn add react-navigation-tabs