首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React原生InputAccessoryView在iOS 11上不起作用

React原生InputAccessoryView在iOS 11上不起作用
EN

Stack Overflow用户
提问于 2018-07-16 19:14:23
回答 1查看 1.3K关注 0票数 1

我有一个简单的TouchableOpacities InputAccessoryView来浏览TextInputs as pictured here.的成绩册表格,然而,这个InputAccessoryView不会响应任何触摸。

经过一些研究,似乎InputAccessoryViews在没有a workaround的iOS 11上被破坏了,但是这个变通方法在react原生中存在吗,如果不存在,我能做什么来使这个InputAccessoryView工作吗?

EN

回答 1

Stack Overflow用户

发布于 2018-09-16 04:13:08

@Caleb我找到了一个有效的例子: github.com/facebook/react-native/blob/master/RNTester/js/…他们文档中的示例不起作用,但这段代码(由FB编写)实际上可以在iOS 11.4.1上的RN 0.57上运行。它对你有效吗?祝好运!

下面是FB的代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    /**
 * 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上工作。

希望这能有所帮助!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51368686

复制
相关文章
小记React Native与原生通信(iOS端)
emmm…… 先说个题外话,时隔一年,再遇RN,较之以前唯一不同的一点就是遇到的坑终于有人先踩了?本文会通过原生与RN页面相互跳转、方法间的相互调用、以及H5页面调用原生页面进而调用RN页面等方面来阐
谦谦君子修罗刀
2020/04/16
6.4K0
ios原生向react-native发送事件通知
@interfaceMySendMessageModule : RCTEventEmitter
conanma
2021/11/02
1.4K0
React Native iOS原生模块开发实战|教程|心得
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看Android篇的点这里《React Native Android原生模块
CrazyCodeBoy
2018/05/07
2.1K0
React Native iOS原生模块开发实战|教程|心得
教程 | 如何使用Swift在iOS 11中加入原生机器学习视觉模型
选自Hackernoon 机器之心编译 作者:Alex Wulff 参与:侯韵楚、李泽南 随着 WWDC 大会上 iOS 11 的发布,苹果终于推出了原生机器学习和机器视觉框架,由此开启了许多崭新的可能性,使所有性质的应用程序和游戏有望取得显著进步,本文作者 Alex Wulff 将对在 iOS 11 中加入机器学习模型的方法进行简要介绍。 机器学习解决方案在云端的应用已有一些时日,但这类系统需要不间断的网络连接,并且很明显,它通常在 iOS 上会存在显著延迟,也为敏感数据带来了安全隐患。一些第三方的 Sw
机器之心
2018/05/07
2.2K0
教程 | 如何使用Swift在iOS 11中加入原生机器学习视觉模型
React Native 和iOS Simulator 那点事
React Native 和iOS Simulator 那点事 尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 本文出自《React Native学习笔记》@http://www.devio.org系列文章。 问题1:使用React Native时按cmd+r无法reload js,cmd+d无法唤起 React Native开发菜单? 不知大家是否有过这样的经历,用 React Native开发应用正不亦乐乎的时候,突然发现,cmd+r,cmd+
CrazyCodeBoy
2018/05/07
2.1K0
React Native 和iOS Simulator 那点事
原生JS | 作用域
HTML5学堂-码匠:作用域那些必须掌握的知识,还有大量作用域案例练习与分析,快快进来! 作用域的基础知识 在JavaScript中,每个变量会有一个有效区域(范围),这个就是作用域。一个变量在其作用域内是可以被访问的,在作用域外不能被访问。 全局作用域与局部作用域 变量的执行环境有两种:一种是全局,另一种是局部(如:放在函数里面)。 全局变量 在window环境下声明的变量,或者可以理解为非函数内声明的变量,称为全局变量。全局变量存在于整个JavaScript当中,在任何地方都能被访问和修改。 局部变量
HTML5学堂
2018/03/13
4.8K0
原生JS | 作用域
React Native在Mac上部署iOS开发环境
1.如果Mac上没有安装Homebrew请按如下步骤安装 打开终端输入如下代码 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 更新Ruby(版本过低部分组件无法安装) brew install ruby 2.安装Node.js 在这里我使用的是直接下载安装Node.js: https://nodejs.org/en/download/ 简单方便。 3.安装 watchman
Bison
2018/07/04
7420
iOS 11 editActionsForRowAtIndexPath
iOS 11下 editActionsForRowAtIndexPath被替换成两个新的代理 Demo // iOS 11 新特性 左边侧滑 - (nullable UISwipeActionsConfiguration *)tableView:(UITableView *)tableView leadingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath { } // iOS 11 新特性 右边侧滑 - (nulla
程序员不务正业
2018/06/14
8710
iOS原生Loading效果
前言: UIActivityIndicatorView 活动指示器 ,就是一个转圈圈的控件(类似菊花)。 方法说明: 初始化方法 public init(activityIndicatorStyle
Dwyane
2018/05/22
3K0
iOS 原生分享
-(void)shareWithText:(NSString *)text AndIcon:(UIImage *)image AndUrl:(NSURL *)url{
星宇大前端
2019/01/15
7740
SwiftUI TextField 进阶 —— 事件、焦点、键盘
本文将探讨涉及 SwiftUI TextField 的事件、焦点切换、键盘设置等相关的经验、技巧和注意事项。
东坡肘子
2022/07/28
13.5K0
SwiftUI TextField 进阶 —— 事件、焦点、键盘
【云原生】在 React Native 中使用 AWS Textract 实现文本提取
Amazon Textract 是 Amazon 推出的一项机器学习服务,可将扫描文档、PDF 和图像中的文本、手写文字提取到文本文档中,然后可以将其存储在任何类型的存储服务中,例如 DynamoDB、s3 等。
前端修罗场
2023/10/07
3170
【云原生】在 React Native 中使用 AWS Textract 实现文本提取
Android原生嵌入React Native
1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的。 我们
xiangzhihong
2018/02/05
1.6K0
Android原生嵌入React Native
React Native调用原生组件
在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些原生的属性,我们需要调用原生代码来实现,或者是我们需要复用一些原来的Java代码,这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。 相关文档可以参照官方的介绍。 #实例 下面我们就通过实现一个自定义模块,来熟悉编写原生模块需要用的一些知识。该模块主要实现调用一些Android原生的功能,比如弹Toast,启动Activity等。
xiangzhihong
2018/01/26
1.6K0
React Native调用原生组件
在React Native开发过程中,有时候我们可能需要访问平台的API,但react Native还没有相应的实现,或者是React Native还不支持一些原生的属性,我们需要调用原生代码来实现,或者是我们需要复用一些原来的Java代码,这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。 相关文档可以参照官方的介绍。 实例 下面我们就通过实现一个自定义模块,来熟悉编写原生模块需要用的一些知识。该模块主要实现调用一些Android原生的功能,比如弹Toast,启动Activity等。 实
xiangzhihong
2018/02/06
1.7K0
React Native通信原生Android
序言: 最近一直在拓展自己的技术栈,提高提高自己的技术眼界。8月份投了一家上海某公司的实习,Android方面的知识点聊起来都很nice,各种源码分析和框架等等,然后问了一个rn调用原生的问题,因为才刚接触,还处在搭环境,所以没回答上来,还是有点可惜的,但是,现在知道了,发现有点晚了.......,不过还是很享受面试的过程,他能唤醒我对知识的渴望,不为每天工作的忙碌而失去初心。 今天讲的这个例子虽然官网有,但是官网篇幅比较僵硬,都是在引导一个对代码的过程,跟ctrl+c、ctrl+v没什么区别,无法引起
codelang
2018/06/26
1.3K0
原生 Android 集成 React Native
使用 React Native 从零开始开发一款移动应用是一件很惬意的事情,但对于一些已经上线的产品,完全摒弃原有应用的历史沉淀,全面转向 React Native 是不现实的。因此,使用React Native去统一原生Android、iOS应用的技术栈,把它作为已有原生应用的扩展模块,是目前混合开发的最有效方式。
逆锋起笔
2021/04/07
1.3K0
原生 Android 集成 React Native
React Native使用原生组件
概述 有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要实现某些高性能的、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。 我们知道React Native本身对这种偏业务和底层调用是不关心的,这时候我们就想到了原生组件,我们通过调用原生组件,然后经过特定的封装来达到效果。如我们在原生开发中常见的Toast为例: 原生模块封装 假设我们希望可以从Javascript发起一个T
xiangzhihong
2018/02/05
2.2K0
iOS进阶之runtime作用
前言 Runtime基本是用C和汇编写的,可见苹果为了动态系统的高效而作出的努力。你可以在这里下到苹果维护的开源代码。苹果和GNU各自维护一个开源的runtime版本,这两个版本之间都在努力的保持一致。Objective-C 从三种不同的层级上与 Runtime 系统进行交互,分别是通过 Objective-C 源代码,通过 Foundation 框架的NSObject类定义的方法,通过对 runtime 函数的直接调用。大部分情况下你就只管写你的Objc代码就行,runtime 系统自动在幕后辛勤劳作着。
Dwyane
2018/05/22
6380
点击加载更多

相似问题

iOS 11 inputAccessoryView断裂

26

关闭模式后,React原生IOS InputAccessoryView将从屏幕上消失

287

KeyboardAvoidingView在React原生布局上不起作用

162

react原生secureTextEntry在安卓上不起作用

567

React原生localeCompare在安卓上不起作用

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文