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

image.png

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 (
            
                
                    
                     this.loseFocus()}/>
                    
                    
                
                
                    
                
            
        )
    }
}

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'
    }
})