4

我有几个视图，我已经实现了一种方法，用户可以在屏幕上拖动它们以将它们放置在他们想要的位置。这些视图中的每一个都有一个可编辑的文本字段。（想想便利贴）。

为了将便利贴放在用户想要的位置，我使用变换样式属性来平移 X 和 Y 位置。在我将这些便签放在滚动视图中之前，这非常有效。

它在 IOS 上按预期工作。在 android 上，每当用户编辑或关注便笺中的可编辑字段时，滚动视图都会滚动到屏幕顶部。我相信这是因为在 android 上，由于 transform 样式属性，ScrollView 不知道 TextInput 的更改位置。

我已经搜索了 ScrollView 的文档，甚至没有找到关于文本编辑功能的自动滚动的提及。更不用说如何禁用它了。

有没有办法防止 ScrollView 在聚焦或编辑时自动滚动到 TextInput？

有没有办法让 ScrollView 知道 TextInput 已移动？

以下是出现此问题的屏幕的最小示例：

import * as React from 'react';
import {TextInput, StyleSheet, ScrollView, View} from 'react-native';


export default function BadAutoScrollScreen(props) {

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scroll} contentContainerStyle={styles.contentContainer}>
       <View style={styles.transformedView}>
         <TextInput>Some Text to Edit</TextInput>
       </View>
      </ScrollView>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  scroll: {
    width: '100%',
    height: '100%',
    backgroundColor: 'black',
    position:'absolute',
  },
  contentContainer: {
    paddingTop: 15,
    height: 2000,
  },
  transformedView: {
    width:'100%',
    height:100,
    justifyContent: 'center',
    backgroundColor: 'orange',
    borderRadius: 15,
    alignItems: 'center',
    transform: [
      {translateY: 800},
    ]
  },
});
4

0 回答 0