反应本机 InputAccessoryView 在 iOS 11 上不起作用

Posted 2023-03-15

【中文标题】反应本机 InputAccessoryView 在 iOS 11 上不起作用

【英文标题】：React Native InputAccessoryView not working on iOS 11

【发布时间】：2018-07-16 19:14:22

【问题描述】：

我有一个 TouchableOpacities 的简单 InputAccessoryView 来导航 TextInputs 的成绩簿表as pictured here. 但是，这个 InputAccessoryView 不响应任何触摸。

经过一些研究，在没有a workaround 的情况下，ios 11 上的 InputAccessoryViews 似乎被破坏了，但是这种解决方法是否存在于 react native 中，如果没有，我能做些什么来使这个 InputAccessoryView 工作吗？

【问题讨论】：

我遇到了同样的问题。甚至 FB 自己的示例都无法正常工作。令人沮丧...您找到解决方法了吗？ :-)

【参考方案1】：

@Caleb 我找到了一个有效的示例：github.com/facebook/react-native/blob/master/RNTester/js/... 他们文档中的示例无效，但此代码（由 FB 提供）实际上适用于iOS 11.4.1 上的 RN 0.57。对你起作用吗？祝你好运！

这是FB的代码：

    /**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 * @format
 */

'use strict';

const React = require('React');
const ReactNative = require('react-native');
const 
Alert,
Button,
InputAccessoryView,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
 = ReactNative;

class Message extends React.PureComponent<*> 
render() 
    return (
    <View style=styles.textBubbleBackground>
        <Text style=styles.text>Text Message</Text>
    </View>
    );



class TextInputBar extends React.PureComponent<*, *> 
state = text: '';

render() 
    return (
    <View style=styles.textInputContainer>
        <TextInput
        style=styles.textInput
        onChangeText=text => 
            this.setState(text);
        
        value=this.state.text
        placeholder='Type a message...'
        />
        <Button
        onPress=() => 
            Alert.alert('You tapped the button!');
        
        title="Send"
        />
    </View>
    );



class InputAccessoryViewExample extends React.Component<*> 
static title = '<InputAccessoryView>';
static description =
    'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';

render() 
    return (
    <View>
        <ScrollView keyboardDismissMode="interactive">
        Array(15)
            .fill()
            .map((_, i) => <Message key=i />)
        </ScrollView>
        <InputAccessoryView backgroundColor="#fffffff7">
        <TextInputBar />
        </InputAccessoryView>
    </View>
    );



const styles = StyleSheet.create(
textInputContainer: 
    flexDirection: 'row',
,
textInput: 
    flex: 1,
    paddingLeft: 10,
,
text: 
    padding: 10,
    color: 'white',
,
textBubbleBackground: 
    backgroundColor: '#2f7bf6',
    borderRadius: 20,
    width: 110,
    margin: 20,
,
);

module.exports = InputAccessoryViewExample;

我运行了这个示例，可以确认它适用于 RN 0.57 和 iOS 11.4.1。

希望这会有所帮助！