hcmobile-sdk/components/switch/SwitchDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Switch from './Switch';

// create a component
class SwitchDemo extends Component {


    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        默认样式：
                    </Text>
                    <Switch
                        value = {true}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        字体样式：
                    </Text>
                    <Switch
                        activeText = {'开'}
                        inActiveText = {'关'}
                        onValueChange = {(value) => {
                            let string = value ? '打开': '关闭';
                            alert(string);
                        }}
                        value = {true}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        去掉字体显示:
                    </Text>
                    <Switch
                        activeText = {''}
                        inActiveText = {''}
                        disabled
                        value = {true}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        颜色修改:
                    </Text>
                    <Switch
                        activeText = {''}
                        inActiveText = {''}
                        backgroundActive = 'yellow'
                        backgroundInactive = '#333'
                        circleActiveColor = 'blue'
                        circleInActiveColor = 'white'
                        circleSize = {30}
                        value = {true}
                    />
                </View>
                <View style = {styles.rowStyle}>
                    <Text style = {styles.tagText}>
                        大小修改:
                    </Text>
                    <Switch
                        activeText = {''}
                        inActiveText = {''}
                        circleSize = {50}
                        value = {true}
                    />
                </View>
            </View>
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    rowStyle:{
        paddingTop:10,
        paddingLeft:20,
        flexDirection: 'row',
        alignItems: 'center',
        width:'100%',
    },
    tagText:{
        marginRight:20,
        width:100,
    }
});

//make this component available to the app
export default SwitchDemo;