第6.4章：输入框定位在底部(虚拟键盘弹起)

import React, { Component } from 'react'
import {
    View,
    Button,
    Platform,
    TextInput,
    StyleSheet,
    ScrollView,
    KeyboardAvoidingView
} from 'react-native'


export default class PhoneList extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    loseFocus() {
        this.refs.input.blur()
    }
    render() {
        let behavior = Platform.OS === 'ios' ? 'position' : null;
        return (
            <KeyboardAvoidingView style={css.container} behavior={behavior}>
                <ScrollView style={{paddingBottom: 100}}>
                    <View style={{backgroundColor: 'red', height: 500}}/>
                    <Button title="收起键盘" style={css.txt} onPress={() => this.loseFocus()}/>
                    <View style={{backgroundColor: 'blue', height: 500}}/>
                    <View style={{backgroundColor: 'green', height: 500}}/>
                </ScrollView>
                <View style={[css.box]}>
                    <TextInput
                        ref="input"
                        style={css.input}
                        placeholderTextColor='#999999'
                        placeholder={'输入代码、名称或简拼'}
                        underlineColorAndroid="transparent" />
                </View>
            </KeyboardAvoidingView>
        )
    }
}

const css = StyleSheet.create({
    container: {
        flex: 1
    },
    input: {
        height: 60,
        width: '100%',
        fontSize: 26,
        color: '#333333',
        backgroundColor: '#eee',
        borderRadius: 60,
        paddingHorizontal: 20,
        paddingVertical: 0
    },
    box: {
        width: 750,
        height: 100,
        backgroundColor: '#fff',
        paddingHorizontal: 30,
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    txt: {
        color: 'red'
    }
})