如何样式React Native切换组件？

Question

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

现在，我想它的样式，所以交换机是这样的：

我不知道会是什么实现，最好的办法？使用开关组件？使用触发真正的开关（将被隐藏）的假组件？

Answer 1

我认为一个好方法是制作一个自定义工厂，我做了一次自定义切换，我会在这里发布。我没有修改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, 
     }, 
     ... 
    }, 
} 

我希望这可以帮助你！

祝你好运！