如何使用React Native将工具栏设置在默认键盘上方？

Question

默认情况下，如何使用React Native在键盘上创建一个按钮？ 我的意思是Native键盘的按钮（不要更改键盘，只需添加为上面的前缀） enter image description here

Answer 1

使用KeyboardAvoidingView中的react-native组件

import React, { Component } from 'react';
import { View, Text, KeyboardAvoidingView, TextInput } from 'react-native';
import { Header } from 'react-native-elements';

class App extends Component {
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'white' }}>
                <Header
                    outerContainerStyles={{ ... }}
                    centerComponent={(
                        <Text style={{ ... }}>
                            Test Screen
                        </Text>
                    )}
                />
                <View style={{ flex: 1 }}>
                    <TextInput
                        style={{ ... }}
                        value={ ... }
                        onChangeText={() => { }}
                    />
                </View>
                <KeyboardAvoidingView
                    behavior='padding'
                    style={{ backgroundColor: '#4099FF' }}
                >
                    <Text>
                        Toolbar
                    </Text>
                </KeyboardAvoidingView>
            </View>
        );
    }
}

export default App;

然后你有这个：

Answer 2

如果您的应用不是全屏显示，则可以在position:absolute组件上使用bottom:0和<View></View>，这些组件要放在键盘上方。