npmchenwei111/app/views/orderdetail/AgreementView.js

test1111

/**
 * Created by ziyu on 2017/6/23.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import Button from '../../common/views/Button'
import { px2dp } from '../../utils/Px2dp'
import R from '../../assets/R'

class AgreementView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      checked: true
    }
  }

  componentDidMount () {
  }

  handleChecked () {
    this.setState({
      checked: !this.state.checked
    }, () => {
      this.props.handleChecked(this.state.checked)
    })
  }

  _onPressButton () {
    if (typeof this.props.onClickUrl === 'function')
      this.props.onClickUrl()
  }

  render () {
    return (
      <View style={styles.container}>
        {
          this.state.checked
            ? <Button onPress={() => {
            this.handleChecked()
          }}>
            <Image
              style={{
                width: px2dp(18), height: px2dp(18), resizeMode: 'contain'
              }}
              source={R.img.ic_read_circle}/>
          </Button>
            : <Button onPress={() => {
            this.handleChecked()
          }}>
            <Image
              style={{
                width: px2dp(18), height: px2dp(18), resizeMode: 'contain'
              }}
              source={R.img.ic_read_circle_gray}/>
          </Button>
        }

        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Text style={{marginLeft: 10, color: '#626262', fontSize: 12}}>已阅读</Text>
          <TouchableOpacity activeOpacity={0.7}
            onPress={() => {this._onPressButton()}}>
            <Text style={{color: '#2493f4', fontSize: 12}}>《借款协议》</Text>
          </TouchableOpacity>
        </View>
      </View>

    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: px2dp(18.5),
    flexDirection: 'row',
    paddingVertical: px2dp(10)
  }
})

export default AgreementView