初识ReactNative

开发环境配置

• 参照这里

页面渲染

• 组件的渲染需要在自定义 class 中进行,每个自定义视图class中都包含一个render()方法,我们需要给render()方法返回一个自定义组件,由其进行将组件渲染:

class MyView extends Component {
    render(){
        return(
            <ScrollView>
                <Text >这里显示文字</Text>
            </ScrollView>
        );
    }
}

实现一个ListView以及下拉刷新

• 代码如下:

 class HomeView extends Component {
    constructor(props){
        super(props);
        this.state = {
            dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            loaded:false,
            dataArray:new Array(),
            date:0,
            isRefreshing:false,
        }
    }

    //渲染组件
    render() {
        return(
            <ListView
                style={{flex:1}}
                dataSource={this.state.dataSource}
                renderRow={model=>this.renderRow(model)}
                onEndReached={() => this.fetchData(this.state.date)}
                enableEmptySections={true}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => this.refreshData()}
                    />
                }
            />
        );
    }

    //组件加载完毕,请求网络数据
     componentDidMount() {
        this.fetchData(0);
     }
     //开启网络请求
    fetchData(date) {
        var url;
        if (date === 0) {
            url = "http://news-at.zhihu.com/api/4/news/latest";
        }else{
            url = "http://news-at.zhihu.com/api/4/news/before/" + date;
        }
        fetch(url)
            .then((responseData) => responseData.json())
            .then((jsonString) => {
                this.setState({
                    dataArray:this.state.dataArray.concat(jsonString.stories),
                    dataSource:this.state.dataSource.cloneWithRows(this.state.dataArray),
                    date:jsonString.date,
                    loaded:true,
                    isRefreshing:false,
                })
            })
            .done()
    }
    //下拉刷新数据
     refreshData() {
        this.state = {
            date:0,
            dataArray:new Array(),
            isRefreshing:true,
            loaded:false,
            dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
        };
        this.fetchData(0);
     }
    //返回ListView 的cell
    renderRow(model){
        return(
            <TouchableOpacity style={styles.container} onPress={() => this.didSelectedRow(model)}>
                <Image source={{uri:model.images[0]}} style={styles.imageStyle}/>
                <Text style={styles.titleStyle}>{model.title}</Text>
            </TouchableOpacity>
        );
    }
    //ListView选中某一行之后
     didSelectedRow(model){
        this.props.navigator.push({
            title:model.title,
            component:HomeDetailView,
            passProps:{'newsID':model.id},
        })
    } 
    }

• 创建样式

var styles = StyleSheet.create ({
    container:{
        flex:1,
        padding:8,
        height:80,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'flex-start',
        borderBottomColor:'gray',
        borderBottomWidth:0.4,
    },
    imageStyle:{
        width:100,
        height:70,
    },
    titleStyle:{
        margin:6,
        flex:1,
        fontSize:15,
    }
})

• 视图渲染之前会先执行class的构造方法,在构造方法内初始化state参数,为ListView指定dataSource,并指定ListView的刷新状态为false,代码:

onstructor(props){
      super(props);
      this.state = {
          dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),//指定当数据不同时才刷新ListView
          loaded:false,
          dataArray:new Array(), //存储数据model的数组
          date:0,
          isRefreshing:false,  //ListView下拉刷新初始状态
      }

• 视图渲染会调用render()方法,将ListView生成

render() {
      return(
          <ListView
              style={{flex:1}}
              dataSource={this.state.dataSource}
              renderRow={model=>this.renderRow(model)}
              onEndReached={() => this.fetchData(this.state.date)}
              enableEmptySections={true}
              refreshControl={
                  <RefreshControl    //ListView的下拉刷新控件
                      refreshing={this.state.isRefreshing} 
                      onRefresh={() => this.refreshData()} //刷新时调用的方法
                  />
              }
          />
      );
  }

• 组件已经加载完成后会调用componentDidMount ()函数,在此方法内执行网络请求:

   componentDidMount() {
      this.fetchData(0);
   }
   //网络请求
  fetchData(date) {
      var url;
      if (date === 0) {
          url = "http://news-at.zhihu.com/api/4/news/latest";
      }else{
          url = "http://news-at.zhihu.com/api/4/news/before/" + date;
      }
      fetch(url)
          .then((responseData) => responseData.json())
          .then((jsonString) => {
              this.setState({
                  dataArray:this.state.dataArray.concat(jsonString.stories),//将json解析之后的数据数组交给dataArray
                  dataSource:this.state.dataSource.cloneWithRows(this.state.dataArray),根据dataArray中的数据生成ListView的dataSource
                  date:jsonString.date,
                  loaded:true,
                  isRefreshing:false,//将刷新状态置为false
              })
          })
          .done()
  }

• 组件生命周期
  1. componentWillMount () 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次

2. componentDidMount () 在组件第一次绘制完成的回调函数，通知组件已经加载完成
3. componentWillReceiveProps() 组件的props或state进行了修改,组件收到新的属性
4. shouldComponentUpdate() 是否更新组件,可以返回false或true来控制是否进行渲染
5. componentWillUpdate()组件将要刷新
6. componentDidUpdate()组件已经完成更新

• 附上Demo