Getting Started with React Native

Most people who are new to react native are deeply confused about this, so I will once again share an introductory article about react native

1: Props (property)

Most components can be customized using various parameters when they are created. These parameters used for customization are called props (properties). props are specified in the parent component, and once specified, they will not change during the life cycle of the specified component

Customized by using different properties in different scenarios , you can maximize the reuse scope of custom components. Just reference this.props in the render function and handle it as needed. Here is an example:

##

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);

Copy after login

2: State (state)

props and state. Props are specified in the parent component, and once specified, they will not change during the life cycle of the specified component. For data that needs to be changed, we need to use state.

state in the constructor (Annotation: This is how ES6 is written, Many early ES5 examples used the getInitialState method to initialize the state, which will gradually be eliminated), and then call the setState method when modifications are needed.

prop. The display or hidden state of text (fast switching between display and concealment produces a flickering effect) changes over time, so this state should be written in state.

##

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);

Copy after login

Example

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>

Copy after login

The above is the detailed content of Getting Started with React Native. For more information, please follow other related articles on the PHP Chinese website!