[ReactNative] Component

51929 ワード

import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = 'Hyun Dong';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {(() => {
          if (name == 'Hyun Dong') return 'My name is HyunDong';
          else if (name == 'Byunjun') return 'My name is Byunjun';
        })()}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

さんこうえんざんし

import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = 'HyunDong';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        My name is {name === 'HyunDong' ? 'ByungJun' : 'ReactNative'}
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

And,Or演算子

import { StatusBar } from 'expo-status-bar';
import React, { Fragment } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const name = 'HyunDong';
  return (
    <View style={styles.container}>
      {name === 'HyunDong' && (
        <Text style={styles.text}> My name is HyunDong </Text>
      )}
      {name !== 'HyunDong' && (
        <Text style={styles.text}> My name is not HyunDong </Text>
      )}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

jsxではfalseは登録されていないので、AND演算子の前の条件が真である場合、後の内容は表示され、偽であれば表示されません.

jsxの場合はnullを許可しますが、未定義のエラーが発生します.

jsxのコメントは{/**/}を使用します.

せいけい

行のスタイルでは、JSXはHTMLとは異なり、STYLEを文字列ではなくオブジェクトとして入力する必要があります.

カメルマーキング法

を用いる
構成部品

は、画面上のUI要素を表示する再利用可能なアセンブリブロックである.

3章ではbuttonコンポーネントのドキュメントをチェックするときにtitleとonPressのプロパティを指定します.

Core Components and APIs · React Native

// ./src/App.jsx
import React from 'react';
import { Text, View, Button } from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ fontSize: 30, marginBottom: 10 }}>Button Component</Text>
      <Button title="Button" onPress={() => alert('Click !!!')} />
    </View>
  );
};

export default App;

// ./src/components/Mybutton.jsx
const MyButton = () => {
  return (
    <TouchableOpacity
      style={{
        backgroundColor: '#3498db',
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPress={() => alert('Click !@#')}
    >
      <Text style={{ color: 'white', fontSize: 24 }}>My Button </Text>
    </TouchableOpacity>
  );
};

propTypes

プロジェクトの規模が拡大するにつれて、部品に支柱を渡す際にエラーのタイプが伝達されず、必要な値も伝達されないため、

propsTypeでは、文字列や数値を含まない異なるタイプの関数、オブジェクト、配列を指定できます.

//App.jsx
import App from './src/App';

export default App;

///src/App.jsx
import React from 'react';
import { Text, View } from 'react-native';
import MyButton from './components/MyButton';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ fontSize: 30, marginBottom: 10 }}>Props</Text>
      <MyButton title="Button" onPress={() => alert('props')} />
      <MyButton title="Button" onPress={() => alert('children')}>
        Children Props
      </MyButton>
      <MyButton onPress={() => alert('default!')} />
    </View>
  );
};

export default App;

//src/components/Mybutton.jsx
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import PropTypes from 'prop-types';

const MyButton = (props) => {
  //console.log(props);
  return (
    <TouchableOpacity
      style={{
        backgroundColor: '#3498db',
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPress={() => props.onPress()}
    >
      <Text style={{ color: 'white', fontSize: 24 }}>
        {props.children || props.title}
      </Text>
    </TouchableOpacity>
  );
};

MyButton.propTypes = {
  title: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
};

export default MyButton;

State

propsは親構成部品から受信した値に変更することはできませんが、stateは構成部品で値を作成、変更し、これらの値を使用して構成部品ステータスを管理できます.ステータスは、構成部品で変更可能な値を表します.ステータスが変更されると、構成部品は再レンダリングされます.

useStateの使用

ユーザステータスは、応答フックがある関数構成部品でステータスを管理できます.
const [state, setState] = useState(initialState);

useStateは、管理状態の変数と変更可能なsetter関数を配列に返します.

ステータス変数は、直接変更するのではなく、userState関数が返すsetter関数を使用する必要があります.

setter関数

returnタイプはvoidまたは値の設定プロンプトタイプである必要があります.

パラメータは、変更するメンバー変数のタイプと同じである必要があります.

名の前にsetを付け、変更するメンバー変数の名前またはその変数の直感的な表示を付けます.

// ./src/components/Counter.jsx
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import MyButton from './MyButton';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View style={{ alignItems: 'center' }}>
      <Text style={{ fontSize: 30, margin: 10 }}>{count}</Text>
      <MyButton title="+1" onPress={() => setCount(count + 1)} />
      <MyButton title="-1" onPress={() => setCount(count - 1)} />
    </View>
  );
};

export default Counter;

アクティビティ(p.94)

ニュース

Webプログラミングで最も一般的に使用されるイベントの1つは、ユーザが特定のDOMをクリックしたときに呼び出されるonClickイベントである可能性があります.反応帳でonClickイベントと最も似たイベントはpressイベントである.
- onPressIn
-タッチ開始時
- onPressOut
-接点がオフの場合
- onPress
-タッチオフ時にonPressOutが呼び出されます.
- onLongPress
-タッチが一定時間以上続くと

//EventButton.jsx
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const EventButton = () => {
  const _onPressIn = () => console.log('Press In !!!\n');
  const _onPressOut = () => console.log('Press Out !!!\n');
  const _onPress = () => console.log('Press !!!\n');
  const _onLongPress = () => console.log('Long Press!!!\n');
  return (
    <TouchableOpacity
      syle={{
        backgroundColor: '#f1c40f',
        padding: 16,
        margin: 10,
        borderRadius: 8,
      }}
      onPressIn={_onPressIn}
      onLongPress={_onLongPress}
      onPressOut={_onPressOut}
      onPress={_onPress}
    >
      <Text style={{ color: 'white', fontSize: 24 }}>Press</Text>
    </TouchableOpacity>
  );
};
export default EventButton;

Reference

この問題について([ReactNative] Component), 我々は、より多くの情報をここで見つけました https://velog.io/@easttwave/ReactNative-Component

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

アプリケーションを最初に開き、バックグラウンドに入ってアプリケーションを再起動すると再起動します.

Ethereal:分散仮想バンキングシステム‐第II部