ActivityIndicator 组件

作用：

显示一个loading加载提示的符号。

属性：

• animating bool

  是否要显示指示器。默认为true

• color string

  滚轮的前景颜色（默认为灰色）

• size enum(‘small’, ‘large’)

  指示器的大小。small的高度为20，large的高度为36.

例子

import React, { Component } from 'react';
import {
    ActivityIndicator
} from 'react-native';

export default class activityIndicator extends Component {
    render() {
        return (
            <ActivityIndicator
                style={{ marginTop: 100 }}
                color="green"
                size="large"
            />
        );
    }
}

WebView 组件

作用

创建一个原生的WebView，可以用于访问一个网页。

用法

webView,网络视图可以在这个内部引入别的网页，使用source进入引入

例子

import React, { Component } from 'react';
import {
    WebView
} from 'react-native';

// 引入京东手机版
export default class WebViewCom extends React.Component {
    render() {
        return (
            <WebView
                source={{ url: 'http://m.jd.com' }}
            />
        );
    }
}

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组件

前言

markdown是一门很容易上手的轻量级语言
这里提供一个Dingus,它是一个网页应用程序，可以将MarkDown文档转换成XHTML文档。

段落

一般由回车换行即可，MarkDown将该行为标识为一个段落【注意：这样的段落没有缩进】

标题

MarkDown支持两种标题语法，Setext和tx形式。Setext用底限形式，利用=（最高阶标题）和-（第二阶标题）；
Atx是在行首插入1到6个#，对应HTML标题H1…H6。

区块代码

区块代码使用Email形式的’>’角括号

修辞和强调

使用星号 (*) 和 (_) 底线标记需要强调的区段

_修辞和强调的区段_  等价于  <em>修辞和强调的区段</em> 
*修辞和强调的区段*  等价于  <em>修辞和强调的区段</em>

__修辞和强调的区段__  等价于  <strong>修辞和强调的区段</strong> 
**修辞和强调的区段**  等价于  <strong>修辞和强调的区段</strong>

列表

无序列表：

使用星号（*）加号（+）减号（-）来作为列表的项目标记

有序列表：

一般是一个数字接着一个英文句点（.）作为项目标记

链接

支持两种形式的链接语法： 行内 和 参考 两种形式，两种都是使用角括号把文字转成链接。

行内形式是直接在后面用括号直接接上链接

This is an [example link](http://example.com/).

你也可以选择性的加上title属性

This is an [example link](http://example.com/ "With a title").

参考形式的链接让你可以为链接定一个名称，之后你可以在文件的其他地方定义该链接的内容。

I get 10 times more traffic from [Google][1] than from [baidu][2]
or [MSN][3].

[1]: http://google.com/ "Google"
[2]: http://baidu.com/ "Baidu"
[3]: http://search.msn.com/ "MSN"

图片

图片的语法和链接一样，同样有行内和参考两种形式，

行内形式

![alt text](/path/icon.png "Title")

参考形式

![alt text][id]

[id]: /path/icon.png "Title"

代码

在一般的段落文字中，你可以使用反引号 ` 来标记代码区段，区段内的 & 、 < 和 > 都会被转换成HTML实体，
这项特性让你可以很容易的在代码区段内插入HTML代码

如果要建立一个已经格式化好的代码区块，只要每行缩进4个空格或者一个Tab就可以了。而 & 、< 和 > 也一样会
转成HTML实体