如何樣式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, 
     }, 
     ... 
    }, 
} 

我希望這可以幫助你！

祝你好運！