React Native 第十天

34、ProgressBar组件(Android)

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            number: 0.5        }    }    componentDidMount() {        var old_num = this.state.number;        var _this = this;        var timer = setInterval(function () {            old_num += 0.1;            if (old_num >= 1) {                clearInterval(timer);            }            _this.setState({                number: old_num            })        }, 500);    }    render() {        return (            <View style={styles.container}>                <ProgressBarAndroid                    styleAttr="Normal"                    color="red"                    indeterminate={false}                    progress={this.state.number}                    style={{                        width: "100%"                    }}                >                    <View>                        <Text>{parseInt(this.state.number * 100)}</Text>                    </View>                </ProgressBarAndroid>            </View>        )    }}

35、Alert和BackAndroid

2s内连续点击两次退出应用

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    componentDidMount() {        BackAndroid.addEventListener('hardwareBackPress', this.myBack.bind(this));    }    componentDidunmount() {        BackAndroid.removeEventListener('hardwareBackPress', this.myBack.bind(this));    }    myBack() {        //true : 阻止掉物理按键效果        if (this.timeData && this.timeData + 2000 >= Date.now()) {            return false;        }        var time = Date.now();        this.timeData = time;        alert('双击退出app');        return true;    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity                    onPress={()=> {                        BackAndroid.exitApp(0);                    }}>                    <Text>{'退出app'}</Text>                    ></TouchableOpacity>            </View>        )    }}

Alert使用方法

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity                    onPress={()=> {                        Alert.alert(                            '标题',                            '标题内容'                        )                    }}>                    <Text>{'点击'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        Alert.alert(                            '标题',                            '标题内容',                            [                                {                                    text: '确定',                                    onPress: ()=> {                                        alert('我被点击了')                                    }                                }                            ],                            {                                cancelable: true                            }                        )                    }}>                    <Text>{'点击监听'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        Alert.alert(                            '标题',                            '标题内容',                            [                                {                                    text: '确定',                                    onPress: ()=> {                                        alert('我被点击了')                                    }                                },                                {                                    text: '取消',                                    onPress: ()=> {                                        alert('我被点击了')                                    }                                }                            ],                            {                                cancelable: false                            }                        )                    }}>                    <Text>{'点击监听'}</Text>                </TouchableOpacity>            </View>        )    }}

36、Appreister和AppState

Appreister:

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    componentDidMount() {        AppRegistry.registerRunnable('aa', function (data) {            alert(data[0] + data[1])        });    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity                    onPress={()=> {                        //注册了一个全局的方法                    }}                >                    <Text>{'注册'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AppRegistry.runApplication('aa', ['hpc', 'hi']);                    }}                >                    <Text>{'运行'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        var data = AppRegistry.getAppKeys(0);                        alert(data);                    }}                >                    <Text>{'查询一下注册的方法'}</Text>                </TouchableOpacity>            </View>        )    }}

AppState状态:

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {            currentState: AppState.currentState        }    }    componentDidMount() {        AppState.addEventListener('change', this.changeState.bind(this));    }    componentWillUnmount() {        AppState.removeEventListener('change', this.changeState.bind(this));    }    changeState(currentState) {        this.setState({            currentState        })        console.log(this.state.currentState);    }    render() {        return (            <View style={styles.container}>                <Text>{'app当前状态' + this.state.currentState}</Text>            </View>        )    }}const styles = StyleSheet.create({    container: {        flex: 1,        alignItems: 'center',        justifyContent: 'center'    }});