我有一个简单的TouchableOpacities InputAccessoryView来浏览TextInputs as pictured here.的成绩册表格,然而,这个InputAccessoryView不会响应任何触摸。
经过一些研究,似乎InputAccessoryViews在没有a workaround的iOS 11上被破坏了,但是这个变通方法在react原生中存在吗,如果不存在,我能做什么来使这个InputAccessoryView工作吗?
发布于 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的代码:
/**
* 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上工作。
希望这能有所帮助!
https://stackoverflow.com/questions/51368686
复制相似问题