如何使用 React Native 制作默认键盘上方的工具栏？

Posted 2023-03-14

【中文标题】如何使用 React Native 制作默认键盘上方的工具栏？

【英文标题】：How make the toolbar above default keyboard with React Native?

【发布时间】：2018-02-17 22:43:06

【问题描述】：

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

【问题讨论】：

这些天在 RN 中有一个内置的解决方案。 facebook.github.io/react-native/blog/2018/03/22/…

【参考方案1】：

像这样使用react-native中的KeyboardAvoidingView组件

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;

那么你有这个：

【参考方案2】：

如果您的应用不是全屏的，您可以在您希望位于键盘顶部的<View></View> 组件上使用position:absolute 和bottom:0。