接着上篇文章继续开发 http://blog.****.net/kangguang/article/details/78011476

1.总体上了三个视图组件：搜索、轮播、商品列表

2.回调事件只进行了弹出提醒处理。

就React Native 开发来说，开发的一般流程如下图：

本次学习内容为：轮播加入加载本地图片显示、商品列表（数据内容展示、分割线、下载刷新、数据刷新）、页面跳转（场景切换）、数据传递等功能

 1.轮播图片加载

    

this.state = {
      currentPage:0,
      isRefreshing:false,
      searchText :'',
      advertisements:[
         {image:require('./image/banner.png')},
         {image:require('./image/banner02.png')},
         {image:require('./image/banner03.png')},

      ],

}

          <View style={styles.advertisement}>
            <ScrollView ref = "scrollView"
                        horizontal = {true}
                        showHorizontalScrollIndicator = {false}
                        pagingEnabled = {true}>
                  {this.state.advertisements.map((advertisement,index)=>{
                    return(
                          <TouchableHighlight key ={index}  onPress = {
                            ()=>Alert.alert('你点击了轮播图',null,null)
                          }>
                             <Image style = {styles.advertisement} source =
                               {advertisement.image}
                             >
                            </Image>
                         </TouchableHighlight>
                         );
                   })}


            </ScrollView>
            <View style={[styles.indicator,{left:left}]}>
            {this.state.advertisements.map((advertisement,index)=>{
              return(
                     <View key = {index}
                                 style = {(index === this.state.currentPage)
                                   ?styles.circleSelected
                                   :styles.circle
                                 }/>
                    );
             })}
            </View>

          </View>

2.商品列表

         dataSource:ds.cloneWithRows(
        [
        {
          image:require('./image/rt_0.png'),
          title:'商品1',
          subTitle:'描述1'
        },
        {
          image:require('./image/rt_1.png'),
          title:'商品2',
          subTitle:'描述2'
        },
        {
          image:require('./image/rt_2.png'),
          title:'商品3',
          subTitle:'描述3'
        },
        {
          image:require('./image/rt_3.png'),
          title:'商品4',
          subTitle:'描述4'
        },
        {
          image:require('./image/rt_4.png'),
          title:'商品5',
          subTitle:'描述5'
        },
        {
          image:require('./image/rt_5.png'),
          title:'商品6',
          subTitle:'描述6'
        },
        {
          image:require('./image/rt_7.png'),
          title:'商品7',
          subTitle:'描述7'
        },
        {
          image:require('./image/rt_8.png'),
          title:'商品9',
          subTitle:'描述9'
        },
        {
          image:require('./image/rt_9.png'),
          title:'商品10',
          subTitle:'描述10'
        }
      ])

        <View style={styles.products}>
            <ListView  dataSource = {this.state.dataSource}
                       renderRow = {this._renderRow}
                       renderSeparator={this._renderSeparator}
                       refreshControl = {this._renderRefreshControl()}//下拉刷新
                       >
           </ListView>
          </View>

3.下拉刷线

  _renderRefreshControl()

  {

    return(

      <RefreshControl

         refreshing  ={this.state.isRefreshing}

         tintColor = {'#FF0000'}

         title = {'正在刷新，请稍后。。。'}

         onRefresh = {this._onRefresh}

         titleColor={'#0000FF'} >

      </RefreshControl>

    );

  }

  _onRefresh =()=>

  {

    this.setState({isRefreshing:true});

    setTimeout(()=>{

      const products = Array.from(new Array(10)).map(

        (value,index)=>(

          {

            image:require('./image/rt_0.png'),

            title:'新商品'+index,

            subTitle:'新商品描述'+index

          }

        )

      );

      this.setState({isRefreshing:false,dataSource:ds.cloneWithRows(products)});

    },2000);

  }

4.页面跳转

    新建home.js 

    将app.js内容全部拷贝到home.js中，把class名改为home

    修改app.js

      在Xcode点击运行 这是报错

  

  这是因为在0.4以后版本中 Navigator 组件从react-native移除了，而需要导入react-native-deprecated-custom-components这个包来使用 Navigator。于是就需要安装这个包并引入

  解决办法：

   

React Native 定义好的动画包括：

FloatFromRight

FloatFromLeft

FloatFromBottom

FloatFromBottomAndroid

FadeAndroid

HorizontalSwipeJump

HorizontalSwipeJumpFromRight

VerticalUpSwipeJump

VerticalDownSwipeJump

 

 

           在使用this.props.navigator 获取Navigator 之后，可以使用Navigator 的如下接口进行场景的切换。

           push(route):跳转到新的场景，并且将场景入栈。

           pop:跳转到上一个场景，并且将当前场景出栈。

           popToRoute(route):：pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景都会被卸载。

           popToTop():pop到栈中的第一个场景，卸载其他的所有场景。

           replace(route):用一个新的路由替代当前场景。

           replaceAtIndex(route,index):替换指定序号的路由场景。

           replacePrevious(route):替换上一个场景

           其他方法：jumpBack（）、jumpForward（）、jumpTo（route）以及resetTo（route）等

         

7.实现页面间的数据传递

   在React Native中有两种方式可以存储和传递数据，即props（属性）以及state（状态）其中：

   props 通常是在父组件中指定的，而且一经指定，在被指定的组件的生命周期中则不再改变。

   state 通常用于存储需要改变的数据，并且当state数据发生更新时，React Native会刷新界面