3

我正在使用 tcomb-form-native ( https://github.com/gcanti/tcomb-form-native ) 模块在 React Native 中制作表单。这个模块提供了一个布尔类型的输入，它呈现一个 Switch 组件（https://facebook.github.io/react-native/docs/switch.html）。

现在，我正在尝试设置它的样式，所以 Switch 看起来像这样：在此处输入图像描述

我不确定实现这一目标的最佳方法是什么？使用开关组件？使用触发真实开关的假组件（将被隐藏）？

4

1 回答 1

1

我认为一个好方法是制作一个自定义工厂我曾经做过一次自定义开关，我会在这里发布。我没有修改 Switch 的外观，但我相信您可以创建一个看起来像您的图像的组件，然后在您的工厂中使用它。就我而言，我将一些文本与带有可点击链接的开关对齐等等。我还没有尝试过，但我想你可以用你自己的替换 Switch 组件。

import React from 'react';
import { View, Text, Switch, TouchableOpacity } from 'react-native';
import t from 'tcomb-form-native';
import Strings from '../config/strings.js';

var Component = t.form.Component;

class TermsSwitch extends Component {

  constructor (props) {
    super(props);
    var locals = super.getLocals();
  }

  getLocals () {
    var locals = super.getLocals();
    return locals;
  }

  getTemplate () {
    return function (locals) {
      var stylesheet = locals.stylesheet;
      var formGroupStyle = stylesheet.formGroup.normal;
      var controlLabelStyle = stylesheet.controlLabel.normal;
      var checkboxStyle = stylesheet.checkbox.normal;
      var helpBlockStyle = stylesheet.helpBlock.normal;
      var errorBlockStyle = stylesheet.errorBlock;

      if (locals.hasError) {
        formGroupStyle = stylesheet.formGroup.error;
        controlLabelStyle = stylesheet.controlLabel.error;
        checkboxStyle = stylesheet.checkbox.error;
        helpBlockStyle = stylesheet.helpBlock.error;
      }

      var label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;
      var help = locals.help ? <Text style={helpBlockStyle}>{locals.help}</Text> : null;
      var error = locals.hasError && locals.error ? <Text accessibilityLiveRegion="polite" style={[errorBlockStyle, {marginTop: 2}]}>{locals.error}</Text> : null;

      return (
        <View style={formGroupStyle}>
          {label}
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <View style={{flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center'}}>
              <Text style={{fontSize: 14}}>Jag har läst och accepterar </Text>
              <TouchableOpacity onPress={() => locals.config.onPressTerms()}>
                <Text style={{fontStyle: 'italic', fontSize: 14, textDecorationLine: 'underline'}}>villkoren</Text>
              </TouchableOpacity>
            </View>
            <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', paddingTop: 6}}>
              <Switch
                accessibilityLabel={locals.label}
                ref="input"
                disabled={locals.disabled}
                onTintColor={locals.onTintColor}
                thumbTintColor={locals.thumbTintColor}
                tintColor={locals.tintColor}
                style={checkboxStyle}
                onValueChange={(value) => locals.onChange(value)}
                value={locals.value} />
            </View>
          </View>
          {help}
          {error}
        </View>
      );
    }
  }
}

export default TermsSwitch

然后使用您的工厂，例如：

const options = {
    fields: {
        your_switch: {
          config: {
            onPressTerms: () => {
              ...
            },
          },
          factory: TermsSwitch,
          stylesheet: stylesheet,
        },
        ...
    },
}

我希望这可以帮助你！

祝你好运！

于 2017-08-09T13:20:14.307 回答