我正在使用 tcomb-form-native ( https://github.com/gcanti/tcomb-form-native ) 模块在 React Native 中制作表单。此模块提供 bool 类型的输入,它呈现一个 Switch 组件 ( https://facebook.github.io/react-native/docs/switch.html )。
现在,我正在尝试设计它的样式,因此 Switch 看起来像这样:
我不确定实现该目标的最佳方法是什么?使用开关组件?使用触发真实开关(将被隐藏)的虚假组件?
最佳答案
我认为一个好方法是制作一个自定义工厂 我制作了一个自定义开关,我会在这里发布。我没有修改 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,
},
...
},
}
希望对您有所帮助!
祝你好运!
关于react-native - 如何设置 React Native 开关组件的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45563710/