02-组件及其自定义

2019-04-15 18:09发布

站内文章 / PIC单片机
12884 0 1667

组件的属性（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 ( ); } } 961298-41eef59fe060f90b.png 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方法 // 返回要渲染出来的组件

常见调试错误

错误一：
961298-a43544398ebc0807.png image.png 错误二：
961298-13d154dc69038605.png image.png

热门文章