npmchenwei111/app/test/TestPageForChenWei.js

test1111

/**
 * Created by chenwei on 2017/8/16.
 */

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import ActionBar from '../bar/ActionBar'
import ColorButton from '../common/views/ColorButton'
const PropTypes = require('prop-types')

class PureView extends React.PureComponent {

  render () {

    console.log('TestLog', 'PureView render', this.props)

    return (
      <View>
        <Text>{ '数据' + this.props.refreshData + '；时间' + new Date().getTime()}</Text>
      </View>
    )

  }
}

class TestPageForChenWei extends Component {

  static navigationOptions = ({navigation, screenProps}) => ({
    header: <ActionBar
      nav={navigation}
      screenProps={screenProps}
      data={{
        title: 'chenwei的测试页面'
      }}
    />
  })

  constructor (props) {
    super(props)
    console.disableYellowBox = true
    this._initState()
  }

  _initState () {

    this.state = {

      refreshData: true

    }

    this.count = 0
  }

  //@Override 重写方法
  componentDidMount () {

    this.f = {
      func1: function () {
        console.log('TestLog1', arguments)   //结果[1,2,3]
      },

      func2: () => {
        console.log('TestLog2', arguments)   //结果 空
      },

      func3: function (...args) {
        console.log('TestLog3', args)   //结果[1,2,3]
      },

      func4: (...args) => {
        console.log('TestLog4', args)   //结果[1,2,3]
      },
    }

    this.f.func1(1, 2, 3)
    this.f.func2(1, 2, 3)
    this.f.func3(1, 2, 3)
    this.f.func4(1, 2, 3)

    //方式一

    function FF () {
    }

    FF.prototype.printLog = function (msg) {
      console.log('TestLog', msg)   //这是12345
    }

    new FF().printLog('这是12345')

    //方式二

    class FF2 {

      printLog (msg) {
        console.log('TestLog', msg)   //这是54321
      }

    }

    new FF2().printLog('这是54321')

    this.testEquals()

    let v = [1, 2, 3, 4].reduce((sum, element) => {
      return sum + element
    }, 10)

    console.log('TestLog', 'reduce:' + v)

  }

  testEquals () {

    console.log('TestLog', NaN === NaN)   //false
    console.log('TestLog', {a: 1} === {a: 1})//false

    console.log('TestLog', null == undefined)//true
    console.log('TestLog', '123' == 123)//true
    console.log('TestLog', true == 1)//true
    console.log('TestLog', true == '1')//true
    console.log('TestLog', true == 2)//false
    console.log('TestLog', true == !!2)//true
    console.log('TestLog', {a: 1}.toString() == {a: 1}, {a: 1}.toString())//true [object Object]
    console.log('TestLog', {a: 1} == {a: 1})//false
    console.log('TestLog', JSON.stringify({a: 1}) == JSON.stringify({a: 1}))//true

  }

  testContext () {

    class Son extends React.Component {
      render () {
        console.log(this.context.color)
        return (<Text >儿子的{this.context.gene}</Text>)
      }
    }
    Son.contextTypes = {
      gene: PropTypes.string
    }

    class Father extends React.Component {

      render () {
        return (
          <View>
            <Text>爸爸的{this.context.gene}</Text>
            <Son/>
          </View>
        )

      }
    }
    Father.contextTypes = {
      gene: PropTypes.string
    }

    class GrandFather extends React.Component {
      getChildContext () {
        return {gene: '[基因]'}
      }

      render () {
        return (<Father />)
      }
    }
    GrandFather.childContextTypes = {
      gene: PropTypes.string
    }

    return <GrandFather/>
  }

  componentWillUnmount () {
  }

  _refreshFunc = () => {

  }

  render () {

    return (

      <View>
        <ColorButton
          style={{
            backgroundColor: '#ee4444',
            padding: 8
          }}
          data={{
            color: '#ffffff',
            text: '点击我刷新'
          }}
          onPress={() => {
            this.setState({
              refreshData: 1
            })
          }}
        />

        <PureView
          refreshData={this.state.refreshData}
          refreshFunc={this._refreshFunc}
        />

        <View style={styles.container}>
          {
            this.testContext()
          }
        </View>


      </View>
    )
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,                  //0,1
    flexDirection: 'row',     //row,column
    justifyContent: 'center', //主轴方向
    alignItems: 'flex-start', //垂直主轴方向
  }
})

export default TestPageForChenWei