React Native填坑之旅

1.fetch用在componentDidMount中,否则会不停的请求

  fetchData () {
    fetch('http://127.0.0.1:8360/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({members:responseJson.data});
      }).catch((error) => {
        console.error(error);
      }).done(); //不done会返回promise对象
  }
            <TouchableButton text="点我刷新"
            style={styles.refresh}
            onPress={this.fetchData.bind(this)}
            />
这里的onPress使用了bind,不然会不停的请求,把服务端弄死

以上跟react native的渲染模式有关 全盘代码做个备份

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';  
import {  
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  ScrollView,
  Image,
  View,
  TabBarIOS,
  Animated
} from 'react-native';
import NavigationBar from 'react-native-navbar';  
import TouchableButton from './compents/public/ButtonComponent';  
const styles  = require('./compents/styles/Common');  
const Member = React.createClass({  
  render() {
    return (
      <View>
        <Text style={{color:'#B02B2C'}}>
        {this.props.mobile}
        </Text>
        <Text>
        {this.props.mem_name}
        </Text>
      </View>
    );
  }
});
class qitianapp extends Component {  
  constructor(props: any) {
    super(props);
    const data = [
                // {
                // "mem_mobile": "15114850288",
                // "mem_id": 1461,
                // "mem_name": "刘子为"
                // },
                // {
                // "mem_mobile": "13588727519",
                // "mem_id": 1462,
                // "mem_name": "何之钿"
                // }
    ];
    this.state = {
      bounceValue: new Animated.Value(0),
      members:data
    };
  }
  fetchData () {
    fetch('http://127.0.0.1:8360/')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({members:responseJson.data});
      }).catch((error) => {
        console.error(error);
      }).done();
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值


    this.fetchData();
    console.log(this.state.members);
    Animated.sequence([
      Animated.spring(                          // 可选的基本动画类型: spring, decay, timing
        this.state.bounceValue,                 // 将`bounceValue`值动画化
        {
          toValue: 0.7,                         // 将其值以动画的形式改到一个较小值
          friction: 1,                          // Bouncier spring
        }
      ),
    ]).start();                                // 开始执行动画
  }
  render() {
    const rightButtonConfig = {
      title: 'Next',
      handler: () => alert('hello!'),
    };

    const titleConfig = {
      title: '这里是第一屏',
    };

    return (
      <View style={{flex:1}}>
      <NavigationBar
      title={titleConfig}
      rightButton={rightButtonConfig}
      style={styles.nav}
       />
       <ScrollView>

           <View style={styles.container}>
           <Animated.Image                         // 可选的基本组件类型: Image, Text, View
              source={{uri: 'https://git.hlslm.cn/uploads/appearance/logo/1/082220ceefdb399596.png'}}
              style={{
                flex: 1,
                width:450,
                height:100,
                transform: [                        // `transform`是一个有序数组(动画按顺序执行)
                  {scale: this.state.bounceValue},  // 将`bounceValue`赋值给 `scale`
                ]
              }}
            />
            <TouchableButton text="点我刷新"
            style={styles.refresh}
            onPress={this.fetchData.bind(this)}
            />
            {this.state.members.map(function(member){
              return <Member mem_name={member.mem_name} mobile={member.mem_mobile}/>
            })}
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <TextInput/>
            <Text style={styles.instructions}>
              To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
          </View>
          </ScrollView>
      </View>

    );
  }
}
AppRegistry.registerComponent('qitianapp', () => qitianapp);
浙ICP备16045237号-1