当前位置: 58彩票app下载 > 编程技术 > 正文

Native实战开发4,Native实战开发5

时间:2019-09-18 11:14来源:编程技术
本教程内容和同步更新。 本教程内容和同步更新。 在接着开发我们的App之前,我们需要理解一下什么是属性和状态 接下来,我们将使用TextInput作为todo的输入框,将todo item加到todolist里

本教程内容和 同步更新。

本教程内容和 同步更新。

在接着开发我们的App之前,我们需要理解一下什么是属性和状态

接下来,我们将使用TextInput作为todo的输入框,将todo item加到todo list里。

属性

Props很好理解,一个组件在创建的时候,都会有一些参数,比如长宽高等,这些参数就称为属性,比如html里的<Img>,我们知道有一个src的属性。属性一般是在父组件中创建子组件时传值,而传值之后在子组件的生命周期中值不会发生变化。对于需要改变的数据,我们可以使用状态。属性可以是一个数值,也可以是一个回调函数,这点比较重要,我们后面的例子中将大量使用将回调函数传给子组件的属性。

我们来看一个属性的例子:我们将导入一个自定义的Button,然后传入了2个属性,其中一个是字符串,而另一个是回调函数。

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';import Button from './button';class Demo extends Component { onClick() { // 点击处理事件 } render() { return ( <View> <Button text='This is a button' onClick={this.onClick.bind} /> </View> ); }}AppRegistry.registerComponent('Demo', () => Demo);

button.js我们使用了TouchableOpacity来实现这个自定义的Button,里面的Text读取了this.props.text的值,而onPress方法则使用了属性里传过来的this.props.onClick方法。这样我们就把你组件的方法传给了子组件。

import React, { Component } from 'react';import { View, TouchableOpacity, Text } from 'react-native';class Button extends Component { render() { return ( <View> <TouchableOpacity onPress={this.props.onClick}> <Text>{this.props.text}</Text> </TouchableOpacity> </View> ); }}export default Button;

在线示例:

首先,思考一下我们要怎么对数据进行管理。对于整个app来说,我们需要有2个状态值,一个用于存储当前正在输入的todo,一个用于存储所有的todo item,这2个状态在app初始状态的时候,都是空的(对于todo list值来说,后面我们需要导入之前持久存储的数据,这个我们后面再讲),当我们在TextInput中输入字符的时候,会更新当前正在输入的todo value;当我们按下键盘上的"done"按钮的时候,会将这个todo value增加到todo list里,同时将这个value清空。

状态

State是组件里需要变化的数据,比如一个组件在初始导入数据的时候,我们需要显示一个loading的效果,而当数据导入完成,这个loading效果会消失掉,我们就可以使用一个boolean型的state来实现这一点。State一般是在组件的构造函数里进行初始化,使用this.setState()方法来更新状态值。

我们来看一个实现loading效果的例子

  • 在constructor()方法里,设置this.state.loadingtrue
  • 在componentWillMount()方法里,执行具体的loading操作,完成后将loading设置为false:this.setState({loading:false})
  • 在render()方法里,根据this.state.loading来判断是否显示loading
import React, { Component } from 'react';import { View, Text } from 'react-native';class Loading extends Component { constructor{ super; this.state = { loading: true } } componentWillMount() { //loading,完成后,将this.state.loading设置为false this.setState({ loading: false }) } render() { return ( <View> {this.state.loading && <View style={styles.loading}> <Text>Loading...</Text> </View>} </View> ); }}export default Loading;
  1. React Native实战开发1:搭建开发环境
  2. React Native实战开发2:布局
  3. React Native实战开发3:模块划分
  4. React Native实战开发4:属性和状态
  5. React Native实战开发5:使用TextInput
  6. React Native实战开发6:使用ListView
  7. React Native实战开发7:使用Switch更新todo complete状态
  8. React Native实战开发8: 删除todo item

2个state

  1. value: 存储当前正在输入的todo,TextInput onChangeText事件会更新这个状态
  2. items: 存储所有todo list,TextInput onSubmitEditing事件会更新这个状态,同时将value状态设置为空。

header.js

TextInput是需要放在Header里面的,以下是header.js的新代码:

// 引入React和Componentimport React, {Component} from "react";// 引入Text,显示文字import {View, Text, StyleSheet, TextInput} from "react-native";// 定义Header类,这个类是Component的子类class Header extends Component { /* 实现Header类的render方法,这个方法返回一个View,显示Footer */ render() { return ( <View style={styles.header}> <TextInput placeholder="什么需要做?" value={this.props.value} onChangeText={this.props.onChange} onSubmitEditing={this.props.onAddItem} blurOnSubmit={false} returnKeyType="done" style={styles.input} /> </View> ); }}// 创建StyleSheetconst styles = StyleSheet.create({ header: { paddingHorizontal: 16, flexDirection: "row", justifyContent: "space-around", alignItems: "center" }, input: { flex: 1, height: 50 }});// 导出这个模块,供外部调用export default Header;

我们可以看到,我们在Header是创建了一个TextInput,并且把值和处理方法都放在Header的props中传给了这个TextInput,也就是意味着我们不需要在Header中写代码来处理app的逻辑,这部分代码我们统一放在app.js里来做。

我们对Header传了三个props:

  1. value,是一个值,就是app用于存储当前正在输入的todo value
  2. onChange,一个回调函数,用于TextInput onChangeText的时候,更新app.state.value
  3. onAddItem,一个回调函数,当TextInput onSubmitEditing的时候,更新app.state.items,并将app.state.value设置为空。

接下来我们在app.js里实现这部分代码。

初始化state

在App类的构造方法里,初始化state

 // 构造方法,初始化state constructor { super; // 初始化2个状态 this.state = { value: "", items: [] }; }

TextInput onSubmitEditing回调函数

 /* 传给Header.TextInput.onSubmitEditing的回调函数 更新this.state.items 设置this.state.value为空 */ handleAddItem() { if (!this.state.value) return; // 创建一个新的items,从this.state.items里copy现有的数据,再增加一个新的 const newItems = [ ...this.state.items, { key: Date.now(), text: this.state.value, complete: false } ]; // 更新state this.setState({ items: newItems, value: "" }); }

我并没有直接往this.state.items里增加一条新数据,而是重新创建了一个新的items,从老的items里copy了原有数据,并且增加了一条新数据。这样做的好处是让react native的shouldComponentUpdate性能更好,从而更加快速的知道一个组件是否有状态变化,从而重新render数据。详情参考:

传值给Header props

接下来就是给Header props传值了

 <Header value = {this.state.value} onAddItem = {this.handleAddItem.bind} onChange = { => this.setState} />

运行结果如下:![]( TextInput.png)

当然,现在按下Done增加一个新的todo,我们的app没有任何变化,我们将在下一篇中讲解如果显示todo list。

本节代码:

  1. React Native实战开发1:搭建开发环境
  2. React Native实战开发2:布局
  3. React Native实战开发3:模块划分
  4. React Native实战开发4:属性和状态
  5. React Native实战开发5:使用TextInput
  6. React Native实战开发6:使用ListView
  7. React Native实战开发7:使用Switch更新todo complete状态
  8. React Native实战开发8: 删除todo item

编辑:编程技术 本文来源:Native实战开发4,Native实战开发5

关键词:

  • 上一篇:没有了
  • 下一篇:没有了