练习题

1. 实现一个Navigator，要求包括跳转到新页面的新页面的回退，并且在页面切换时有数据传输

import React, { Component } from 'react';
import {
    Navigator,
    Text,
    TextInput,
    View,
    TouchableOpacity,
    StyleSheet
} from 'react-native';

export default class Nav extends Component {

    render() {
        // 初始化路由
        var rootRoute = {
            component: FirstPage,
            nextPass: {}
        };
        return (
            <Navigator
                //{/* 设置默认的路由 */}
                initialRoute={ rootRoute }
                //{/* 切换页面方式 */}
                configureScene={ (route) => Navigator.SceneConfigs.PushFromRight }
                //{/* 确定要渲染的场景 */}
                renderScene={ (route, navigator) => {
                    // 找到要渲染的页面
                    var Component = route.component;
                    // 返回组件， 把组件的route 和 navigator
                    // 把属性也传递过去
                    return <Component { ...route.nextPass } route={ route } navigator={ navigator }/>

                }}
            />
        );
    }
}

class SecondPage extends Component {
    changePage() {
        this.props.navigator.pop();
    }
    render() {
        return (
            <View style={[ styles.second, styles.container ]}>
                <Text>接收到的数据：{ this.props.text }</Text>
                <TouchableOpacity style={ styles.btn } onPress={ this.changePage.bind(this) }>
                    <Text style={ styles.txt }>点击返回上一页</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

class FirstPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ''
        }
    }
    saveText(text) {
        this.setState({
            text: text
        });
    }
    changePage() {
        var nextRoute = {
            component: SecondPage,
            nextPass: {
                text: this.state.text
            }
        };
        this.props.navigator.push(nextRoute);
    }
    render() {
        return (
            <View style={[ styles.first, styles.container ]}>
                <TextInput placeholder={ '请输入' } style={ styles.input } onChangeText={ this.saveText.bind(this) }></TextInput>
                <TouchableOpacity style={ styles.btn } onPress={ this.changePage.bind(this) }>
                    <Text style={ styles.txt }>点击进入下一页</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    first: {
        backgroundColor: 'cyan',
    },
    second: {
        backgroundColor: 'pink',
    },
    input: {
        height: 25,
        borderWidth: 1,
    },
    btn: {
        width: 150,
        height: 20,
        backgroundColor: 'yellow',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
    },
    txt: {

    }
});

1. 实现一个TabBar，要求至少包括四项，要求有四项标签

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

// 引入三个图片
import movieIcon from './../public/images/movie.png';
import homeIcon from './../public/images/home.png';
import picIcon from './../public/images/pic.png';
import musicIcon from './../public/images/music.png';

export default class TabBar2 extends Component {
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isShow: '首页'
        };
    }
    press(tabName) {
        this.setState({
            isShow: tabName
        });
    }
    render() {
        return (
            <TabBarIOS>
                <TabBarIOS.Item
                    title="首页"
                    icon={ homeIcon }
                    onPress={ this.press.bind(this, '首页') }
                    selected={ this.state.isShow === '首页' }
                >
                    <FirstPage/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="电影"
                    icon={ movieIcon }
                    onPress={ this.press.bind(this, '电影') }
                    selected={ this.state.isShow === '电影' }
                >
                    <SecondPage/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="相册"
                    icon={ picIcon }
                    onPress={ this.press.bind(this, '相册') }
                    selected={ this.state.isShow === '相册' }
                >
                    <ThreePage/>
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="音乐"
                    icon={ musicIcon }
                    onPress={ this.press.bind(this, '音乐') }
                    selected={ this.state.isShow === '音乐' }
                >
                    <FourPage/>
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }
}

class FourPage extends Component {
    render() {
        return (
            <View style={[ styles.container, styles.four ]}>
                <Text>这是第四个页面</Text>
            </View>
        );
    }
}

class ThreePage extends Component {
    render() {
        return (
            <View style={[ styles.container, styles.three ]}>
                <Text>这是第三个页面</Text>
            </View>
        );
    }
}

class SecondPage extends Component {
    render() {
        return (
            <View style={[ styles.container, styles.second ]}>
                <Text>这是第二个页面</Text>
            </View>
        );
    }
}

class FirstPage extends Component {
    render() {
        return (
            <View style={[ styles.container, styles.first ]}>
                <Text>这是第一个页面</Text>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    first: {
        backgroundColor: 'yellow',
    },
    second: {
        backgroundColor: 'red',
    },
    three: {
        backgroundColor: 'blue'
    },
    four: {
        backgroundColor: 'pink'
    }
});

1. 实现一个电影列表，要求通过网络请求读取数据，通过ListView实现，并且在数据加载时有loading组件