React Native 第九天

来源：互联网发布：国家网络空间安全学院编辑：程序博客网时间：2024/05/22 21:08

29、Switch组件(切换按钮)

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            data: true        }    }    render() {        return (            <View style={styles.container}>                <Switch                    value={this.state.data}                    onValueChange={()=> {                        this.setState({                            data: !this.state.data                        })                    }}                    onTintColor={'red'}                    thumbTintColor={'green'}                    tintColor={'blue'}                ></Switch>            </View>        )    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center'    }});AppRegistry.registerComponent('ExampleCode', () => ExampleCode);

30、Picker组件(选择器)

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            defaultData: 'js'        }    }    render() {        return (            <View style={styles.container}>                <View style={{                    width: 200                }}>                    <Picker                        selectedValue={this.state.defaultData}                        onValueChange={(data)=> {                            this.setState({                                defaultData: data                            })                        }}                        style={{                            // backgroundColor: 'red'                        }}                        enabled={true}                        mode={'dialog'}                        prompt={'标题'}                        itemStyle={{                            backgroundColor: '#ddd',                            height: 150                        }}                    >                        <Picker.Item                            label="js"                            value="javascript"                        />                        <Picker.Item                            label="php"                            value="php"                        />                        <Picker.Item                            label="java"                            value="Java"                        />                    </Picker>                </View>                <TouchableOpacity                    onPress={()=> {                        alert(this.state.defaultData)                    }}                >                    <Text>{'获取选中内容'}</Text>                </TouchableOpacity>            </View>        )    }}const styles = StyleSheet.create({    container: {        flex: 1    }});AppRegistry.registerComponent('ExampleCode', () => ExampleCode);

31、Slider组件(滑块)

 export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            defaultData: 'js'        }    }    render() {        return (            <View style={styles.container}>                <Slider                    style={{width: 100}}                    //disabled={true}                    //maximumValue={2} 滑块的初始最大值                    //minimumValue={0}滑块的初始最小值                    //value={0.5}                    //step={0.1} 滑块的最小步长                 /*   onSlidingComplete={()=>{                        alert("滑动结束")                    }}*/                    //ios特有                    //maximumTrackImage={require("./images/home.png")} 指定一个滑块右侧轨道的背景图,仅支持静态图片                    //minimumTrackImage={require("./images/home.png")} 指定一个滑块左侧轨道的背景图,仅支持静态图片                    maximumTrackTintColor={'red'}                    minimumTrackTintColor={'green'}                    //thumbImage={require("./images/mime.png")} 滑块的图标                    //trackImage={} 给轨道设置图片                ></Slider>            </View>        )    }}

32、AppState状态(判断app的状态-前台或者后台)

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            currentState: AppState.currentState        }    }    componentDidMount() {        AppState.addEventListener('change', this.changeState.bind(this));    }    componentWillMount() {        AppState.removeEventListener('change', this.changeState.bind(this))    }    changeState(newState) {        this.setState({            currentState: newState        })    }    render() {        return (            <View style={styles.container}>                <Text>状态:{this.state.currentState}</Text>            </View>        )    }}

33、Android特有方式退出返回键退出App

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            number: 0        }    }    componentDidMount() {        BackAndroid.addEventListener('hardwareBackPress', ()=> {            var number = this.state.number;            number++;            //true 是禁止退出            if (number == 1) {                alert("再按一次退出");                this.setState({                    number: number                });                return true;            }            return false;        })    }    componentWillMount() {    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity                    onPress={()=> {                        BackAndroid.exitApp();                    }}                >                    <Text>{'点击退出'}</Text>                </TouchableOpacity>            </View>        )    }}

阅读全文

0 0