RN-Redux-Project-03-简单显示列表

简单扩展属性加载数据使用Redux
直接扩展属性注入数据
HomePage的数据源数据，通过props传递给子控件，子控件显示

1.TodoListComponent.js

constructor(props){}
初始化状态todoList，通过props加载数据
map()进行遍历，todo理解为Model，index:索引

import React, { Component } from 'react';
import {
    Text,
    View,
    StyleSheet,
} from 'react-native';
export  default  class  TodoListComponent extends  Component{
    constructor(props){
        super(props);
        this.state = {
            todoList:this.props.todoList,
        };
    }
    render(){
        return(
            <View style= {styles.container}>
                {
                    this.state.todoList.map((todo,index)=>{
                        return <Text style ={[styles.todo,todo.status&&styles.change]}>
                            {
                                todo.title
                            }
                        </Text>
                    })
                }
            </View>
        );
    }
}
TodoListComponent.defaultProps = {
    todoList:[],
}
//styles
const  styles = StyleSheet.create({
    container:
        {
            paddingHorizontal: 20,
        },
    todo:
        {
            paddingVertical: 5,
        },
    change:
        {
            textDecorationLine:'line-through',
            color:'red',
        },
})

2.HomePage.js

初始状态todoList（包涵3个 TODO 项）
引入一个子组件TodoListComponent
渲染子组件，通过props传递数据给子组件

添加组件TodoListComponent
constructor(props){}
this.state = {} 初始状态todoList(类似iOS设置数据源)
渲染子组件，扩展todoList，并且传递数据

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import TodoListComponent from '../components/TodoListComponent'
export  default  class  HomePage extends  Component{
    constructor(props){
        super(props);
        this.state = {
            todoList:[
                {title:'吃饭饭',status:true},
                {title:'打游戏',status:false},
                {title:'撸代码',status:false}],
        };
    }
    render(){
        return(
            <View>
                {/*<Text>QQ:738816656</Text>*/}
                <TodoListComponent todoList = {this.state.todoList}/>
            </View>
        );
    }
}