CalculatorView.js 1.96 KB
import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    Image,
} from 'react-native';

export default class CalculatorView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            result: '',
        };
        this.attrData = this.props.attrData;
        this.editable = this.props.editable || false;// 文本框是否可编辑
        this.onChangeText = this.props.onChangeText;
        this.inputType = this.props.inputType || 'default';// 输入类型
    }

    calculateValue(count) {
        let _result = Number(count) * 2;
        this.setState({
            result: _result
        })
    }

    render() {
        let {name, code, type, description, isRequired, isPreview} = this.attrData;
        let {placeholder, expression, showChinese} = this.attrData.data;
        return(
            <View style={{width: '100%', backgroundColor: 'white', paddingHorizontal: 5, paddingVertical: 10}}>
                <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)', marginBottom: 5}}>{name}</Text>
                <TextInput
                    style={{width: "100%", backgroundColor: 'white', textAlign: 'left', paddingVertical: 5}}
                    multiline={false}
                    editable={this.editable}
                    keyboardType={this.inputType}
                    onChangeText={text => {
                        if (this.onChangeText) {
                            this.onChangeText(text)
                        }
                    }}
                    value={this.state.result}
                    placeholderTextColor={'#999'}
                    placeholder={placeholder}
                    underlineColorAndroid="transparent"
                />
                {showChinese && <View style={{flexDirection: 'row'}}>
                    <Text style={{fontSize: 16, color: 'rgba(0, 0, 0, 1)'}}>大写</Text>
                </View>
                }
            </View>
        )
    }
}