React-Native学习笔记（2）

这次练习使用了react-native中的ListView（列表数据展示）和Navigator(页面导航切换)，以下为示例代码：

var React = require('react-native');
var {
　　AppRegistry,
　　View,
　　Navigator,
　　Text,
　　BackAndroid,
　　StyleSheet,
    ListView
} = React;

class PAFFNetwork {

    /**
     * @method HTTP 请求
     * @param options = {
     *      path    : ''        //http url path
     *      method  : ''        //http method,默认 GET
     *      params  : {}        //url query(GET) or body query(POST)
     * }
     * @return A Promise(
     *      then    : Response JSON Object 中 data 数据
     *      catch   : Request Error 或 Response JSON Object error code 失败的错误
     *  )
     * */
    static async request() {
        return fetch("http://gz-fbtoamc.pingan.com.cn/btoa/portal/account/getBankList ", {method: "GET"})
    }
}



var FeedView = React.createClass({
    goBack(){
      this.props.navigator.push({name:"default"});
    },

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this.goBack} >
                    I am Feed View! Tab to default view!
                </Text>
            </View>  
        )
    }
});


var WelcomeView = React.createClass({
    onPressFeed() {
      console.log(this.refs);
      console.log(this.props);
       // this.setState({
       //  openStatus: !!!this.state.openStatus,
       //  dataSource: this.state.dataSource.cloneWithRows([{bankName:"test1",bankId:"001"}, {bankName:"test2",bankId:"002"}])
       // });
        //var getResult = PAFFNetwork.get();
        //this.props.navigator.push({name: 'feed'});
    },

    getInitialState() {
      var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      });
      return {
        dataSource: ds.cloneWithRows([{bankName:"test1",bankId:"001"}, {bankName:"test2",bankId:"002"}]),
        openStatus:0
      };
    },
    componentDidMount() {
      // var self = this;
      // var getResult = PAFFNetwork.request();
      // getResult.then(function(res){
      //   return res.json();
      // }).then(function(res){
      //   self.setState({
      //     dataSource: self.state.dataSource.cloneWithRows(res.data.bankList)
      //   });
      //   console.log(res);
      // })
    },
    renderRow(rowData, s1, rowID) {
      console.log(arguments);
      console.log("renderRow...."+this.state.openStatus);
      return (<Text hidden='true' ref={rowID} onPress={this.onPressFeed}>{rowData.bankName}</Text>);
    },
    render() {
      console.log("render...");
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this.onPressFeed} >
                    This is welcome view.Tap to go to feed view.
                </Text>
                <ListView ref={'ListView'}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                  />
            </View>
        );
    }

});

var DefaultView = React.createClass({

    render(){
      return (
          <View style={styles.container}>
              <Text style={styles.welcome}>Default view</Text>
          </View>
      )
    }
}); 



var SampleApp = React.createClass({

    configureScene(route){
      return Navigator.SceneConfigs.PushFromRight;
    },

    renderScene(router, navigator){
      var Component = null;this._navigator = navigator;
      switch(router.name){
        case "welcome":
          Component = WelcomeView;
          break;
        case "feed":
          Component = FeedView;
          break;
        default: //default view
          Component = DefaultView;
      }

      return <Component navigator={navigator} />
    },

    componentDidMount() {
      var navigator = this._navigator;
      BackAndroid.addEventListener('hardwareBackPress', function() {
          if (navigator && navigator.getCurrentRoutes().length > 1) {
            navigator.pop();
            return true;
          }
          return false;
      });
    },


    componentWillUnmount() {
      BackAndroid.removeEventListener('hardwareBackPress');
    },

    render() {
        return (
            <Navigator
                initialRoute={{name: 'welcome'}}
                configureScene={this.configureScene}
                renderScene={this.renderScene} />
        );
    }

});


var styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    //alignItems: 'center',
    backgroundColor: '#F5FCFF',
    margin: 30,
    padding: 30
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  }
});

//AppRegistry.registerComponent('mytest01', () => SampleApp);

AppRegistry.registerComponent('mytest01', function(){
    var getResult = PAFFNetwork.request();
    getResult.then(function(res){
      return res.json();
    }).then(function(res){
      console.log(res);
    })
    console.log("getResult...");
    return SampleApp;
});