리액트 네이티브 시작하기

React Native를 처음 접하는 대부분의 사람들은 이에 대해 매우 혼란스러워하므로 React Native에 대한 소개 장을 다시 한 번 공유하겠습니다

One: Props (Attributes)

대부분의 구성 요소는 생성 시 다양한 매개변수를 사용하여 사용자 정의할 수 있습니다. 사용자 정의에 사용되는 이러한 매개변수를 props(속성)이라고 합니다. props는 상위 구성 요소에 지정되며, 일단 지정되면 지정된 구성 요소의 수명 주기 동안 변경되지 않습니다.

다양한 시나리오에서 서로 다른 속성 사용자 정의를 사용하면 사용자 정의 구성 요소의 재사용이 극대화될 수 있습니다. render 함수에서 this.props를 참조하고 필요에 따라 처리하세요. 다음은 예입니다.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <text>Hello {this.props.name}!</text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <view>
        <greeting></greeting>
        <greeting></greeting>
        <greeting></greeting>
      </view>
    );
  }
}

AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

두 가지: State(상태)

우리는 두 가지 종류의 데이터를 사용하여 구성 요소를 제어합니다. s 및 주 . props는 상위 구성 요소에 지정되며, 일단 지정되면 지정된 구성 요소의 수명 주기 동안 변경되지 않습니다. 변경해야 하는 데이터의 경우 상태를 사용해야 합니다.

일반적으로 말하면

생성자에서 상태를 초기화해야 합니다(주석: 이것이 ES6이 작성된 방식입니다. 많은 초기 ES5 예제에서는 getInitialState 메소드를 사용하여 상태를 초기화합니다. 이 방법은 다음과 같습니다. 단계적으로 폐지됨) 수정이 필요할 때 setState 메서드를 호출하세요.

계속 깜박이는 텍스트를 만들어야 한다고 가정해 보겠습니다. 텍스트 콘텐츠 자체는 구성 요소가 생성될 때 지정되므로 텍스트 콘텐츠는

prop여야 합니다. 텍스트의 표시 또는 숨김 상태(표시와 숨김 간의 빠른 전환으로 깜박이는 효과 발생)는 시간이 지남에 따라 변경되므로 이 상태는 상태로 작성해야 합니다.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <text>{display}</text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <view>
        <blink></blink>
        <blink></blink>
        <blink></blink>
        <blink></blink>
      </view>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

Instance

2:

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <view>
        <textinput> this.setState({text})}
        />
        <text>
          {this.state.text.split(' ').map((word) => word && '</text></textinput></view>

위 내용은 리액트 네이티브 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!