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

Question

我该如何使用React Native默认在键盘上方添加按钮？我指的是原生键盘上的按钮（不更改键盘，只是将其作为前缀添加）。

- malyarevich

---

现在RN中已经内置了一种解决方案。https://facebook.github.io/react-native/blog/2018/03/22/building-input-accessory-view-for-react-native - thinklinux

Answer 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;

然后你会看到这个： 这是一个图片链接。

- K.Wu

Answer 2

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

- Arash Younesi