React Native基础&入门教程：以一个To Do List小例子，看props和state

export default class ToDoListAdd extends Component<Props> {
    constructor(props) {
        super(props);
    }
    onPress() { } // 暂且为空

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.add} onPress={this.props.onBack}>返回</Text>
                </View>
                <View style={styles.body}>
                    <TextInput />
                </View>
                <View style={styles.footer}>
                    <Button title="确定" onPress={this.onPress} style={styles.btn} />
                </View>
            </View>
        );
    }
}

export default class ToDoListmain extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            isEditing: false
        };

        this.onEdit = this.onEdit.bind(this);
        this.renderItem = this.renderItem.bind(this);
    }

    renderFooter(toggleCheckAll,isAllChecked) {
        if (!this.state.isEditing) {
            return null;
        }
        const count = this.props.todoList.filter(item => item.isChecked).length;
        return (
            <View style={styles.footer}>
                <CheckBox onValueChange={toggleCheckAll} value={isAllChecked} />
                <Text style={styles.menu}>{`已选择:${count}项`}</Text>
            </View>
        );
    }

    onEdit() {
        this.setState((prevState) => {
            return {
                isEditing: !prevState.isEditing
            }
        });
    }

    renderItem(item) {
        return (<ToDoListItem {...item}
            toggleItemCheck={this.props.toggleItemCheck}
            isEditing={this.state.isEditing} />);
    }

    render() {
        const { toggleCheckAll,isAllChecked,onAddItem,todoList } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.add} onPress={onAddItem}>添加</Text>
                    <Text style={styles.title}>待办列表</Text>
                    <Text style={styles.multi}
                        onPress={this.onEdit}>{this.state.isEditing ? '取消' : '多选'}
                    </Text>
                </View>

                <FlatList style={styles.body} isEditing={this.state.isEditing}
                    data={todoList} renderItem={this.renderItem} />

                {this.renderFooter(toggleCheckAll,isAllChecked)}
            </View>
        );
    }
}

export default class ToDoListItem extends Component<Props> {
    constructor(props) {
        super(props);
    }

    render() {
        const { toggleItemCheck,item } = this.props;
        const { isChecked,detail,level } = item;
        const basicLevelStyle = styles.level;
        let specificLevelStyle;
        if (level === 'info') {
            specificLevelStyle = styles.info;
        } else if (level === 'warning') {
            specificLevelStyle = styles.warning;
        } else {
            specificLevelStyle = styles.error;
        }

        return (
            <View style={styles.container}>
                {this.props.isEditing && <CheckBox onValueChange={(value) => toggleItemCheck(item,value)} style={styles.checkbox} value={isChecked} />}
                <Text style={styles.detail}>{detail}</Text>
                <View style={[basicLevelStyle,specificLevelStyle]}></View>
            </View>
        );
    }
}

import ToDoListMain from './ToDoListMain';
import ToDoListAdd from './ToDoListAdd';

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            current: 'main',todoList: [
                {
                    level: 'info',detail: '一般的任务',isChecked: false,key: '0'
                },{
                    level: 'warning',detail: '较重要的任务',},{
                    level: 'error',detail: '非常重要且紧急的任务',key: '2'
                }
            ]
        }
        this.onAddItem = this.onAddItem.bind(this);
        this.onBack = this.onBack.bind(this);
        this.toggleCheckAll = this.toggleCheckAll.bind(this);
        this.toggleItemCheck = this.toggleItemCheck.bind(this);
    }

    onAddItem() {
        this.setState((prevState) => {
            return {
                current: 'add'
            }
        });
    }

    onBack() {
        this.setState({
            current: 'main'
        });
    }

    toggleCheckAll() {
        const flag = this.isAllChecked();
        const newTodos = this.state.todoList.map(item => {
            return {
                ...item,isChecked: !flag
            };
        });
        this.setState({
            todoList: newTodos
        });
    }

    toggleItemCheck(item,key) {
        const newTodos = this.state.todoList.map(todo => {
            if (todo !== item) {
                return todo;
            }
            return {
                ...todo,isChecked: !item.isChecked
            }
        });
        this.setState({
            todoList: newTodos
        });
    }

    isAllChecked() {
        if (!this.state.todoList) return false;
        if (this.state.todoList.length === 0) return false;
        return this.state.todoList.every(item => item.isChecked);
    }

    render() {
        if (this.state.current === 'main') {
            return (<ToDoListMain
                isAllChecked={this.isAllChecked()}
                toggleCheckAll={this.toggleCheckAll}
                toggleItemCheck={this.toggleItemCheck}
                onAddItem={this.onAddItem}
                todoList={this.state.todoList} />);
        } else {
            return (<ToDoListAdd onBack={this.onBack} />);
        }
    }
}