反応ネイティブ101

ビュー
コンテナまたはレイアウトコンポーネント.
ViewコンポーネントはHTML divタグのようです.このコンポーネントの主な目的は別のコンポーネントの周りのコンテナとして動作することです.
別の内部にビューをネストすることができます.レイアウトスタイルを適用する必要がある場合は、すべてのコンポーネントをViewコンポーネントでラップすることは非常に一般的です
一言で言えば

任意のコンポーネント

のレイアウトをスタイリングするためのビューを使用します

はスタイル継承

をサポートしません

は「コラム」

であるデフォルト主軸でFlexboxを使います
例

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const TestComponent = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Hi, What's up</Text>
      </View>
    </View>
  );
};

export default TestComponent;

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

その他:https://reactnative.dev/docs/view

テキスト
これはおそらく反応ネイティブで2番目に最も使用されるコンポーネントです.それはどこでもかなりテキストを表示するために使用されます.
一言で言えば

テキストをあなたのアプリのどこにテキストを表示するために使用します.

スタイル継承と入れ子をサポートします

import React, { useState } from "react";
import { Text, StyleSheet } from "react-native";

const App = () => {
  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        "Title of the App"
      </Text>
      <Text numberOfLines={5}>
                "Body of the App"
            </Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    color: "#CCA7B1"
  },
  titleText: {
    fontSize: 20,
    color: "#000"
  }
});

export default App;

その他:https://reactnative.dev/docs/text

テキスト入力
キーボードを介してアプリケーションにテキストを入力するために使用されるこのコンポーネント.
これは自動修正、自動資本化、プレースホルダのテキスト、および数字のキーパッドやWhatnotなどの異なるキーボードの種類の設定小道具が付属しています.
一言で言えば

テキスト入力を取るために使用します

import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Modal } from "react-native";

const GoalInput = ({ addGoalHandler, modalVisible }) => {
  const [enteredText, setEnteredText] = useState();

  const goalChangeHandler = (enteredText) => {
    setEnteredText(enteredText);
  };

  const addGoalClearBufferHandler = () => {
    addGoalHandler(enteredText);
    setEnteredText("");
  };

  return (
    <Modal visible={modalVisible} animationType="slide">
      <View style={styles.inputBox}>
        <TextInput
          placeholder="Course Goal"
          placeholderTextColor="#D1D5DB"
          style={styles.textInput}
          onChangeText={goalChangeHandler}
          value={enteredText}
        />
        <Button title="Add" onPress={addGoalClearBufferHandler} />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  inputBox: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },

  textInput: {
    padding: 10,
  },
});

export default GoalInput;

その他:https://reactnative.dev/docs/textinput

スタイルシート
スタイルと構造にスタイルを書く方法は、ネイティブのコンポーネントに反応します.スタイルシートはCSSスタイルシートと同様の抽象化ですが、基本的にJavaScriptです.
スタイルシートの最も一般的なユースケースは、Createメソッドを使用してスタイルを記述することです.
EG :

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

"stylesheet . create ()"メソッドは、スタイルを定義するオブジェクトをさらに含むオブジェクトを受け取ります.
これらのスタイルを使用するには、任意のコンポーネントのスタイルプロップを使用して、特定のスタイルオブジェクトを渡します.

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const TestComponent = () => {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.text}>Hi, What's up</Text>
      </View>
    </View>
  );
};

export default TestComponent;

const styles = StyleSheet.create({
  container: {
    padding: 50,
  },
  textContainer: {
    backgroundColor: "#000",
    borderRadius: 50,
    alignItems: "center",
  },

  text: {
    color: "#fff",
    fontSize: 24,
  },
});

その他:https://cutt.ly/sjoZXtn

読書ありがとうございます

あなたの考えを聞くのが大好きだ!