02-组件及其自定义

组件的属性（Props）

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
     // 传入一个名为source的prop来指定要显示的图片的地址，使用名为style的prop来控制其尺寸。
      
    );
  }
}

source={pic} 括号的意思是括号内部为一个js变量或表达式

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

// 自定义组件
class Greeting extends Component {
  render() {
    return (
      // this.props.name
      Hello {this.props.name}!
    );
  }
}

// 使用自定义的组件 Greeting
// export 
export default class LotsOfGreetings extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}

image.png

组件的状态（state）

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

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

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

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

export default class BlinkApp extends Component {
  render() {
    return (
      
        
        
        
        
      
    );
  }
}

组件的样式（组件的属性）

1、组件样式的基本使用

// 组件的样式
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
        
          // 引用定义的样式
          just red
          just bigblue
          bigblue, then red
          red, then bigblue
        
    );
  }
}

// 自定义一个样式
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// 注册样式???
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

2、样式中的宽高

• 指定宽高
  React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
};
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

• 弹性宽高（比例宽高）
  一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。

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

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 试试去掉父View中的`flex: 1`。
      // 则父View不再具有尺寸，因此子组件也无法再撑开。
      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
      
        
        
        
      
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

自定义组件总结

构造方法
属性-样式 // 组件要显示什么，长什么样
状态      // 改变组件的显示状态（比如请求新的数据后刷新控件）
render方法 // 返回要渲染出来的组件

常见调试错误

错误一：

image.png

错误二：

image.png