如何滚动到TextInput Expo中的文本开头（React Native）

发布于 2025-02-13 02:28:35 字数 1428 浏览 0 评论 0原文

我正在尝试在Instagram上的帖子下发表类似于创建者的评论。如果文本更长，则只能看到第一行。您可以通过单击三个点或阅读更多信息来阅读其余部分。在这种情况下，我使用textInput，并在按下启用和禁用Multiline。虽然一切正常，但是在Android设备上，您会看到文本的最后一部分，而不是启用Multiline，然后将其禁用时，您会看到一个奇怪的问题。一切都按预期在iOS设备上工作。我该怎么办来解决这个问题？我的第一个想法是滚动到文本的开头，但我不知道如何，我需要帮助。请随时建议解决此问题的其他方法。这是一个示例我做了我的问题，所以你可以看到我的问题是什么。在iOS模拟器上运行它，您会看到它应该如何运行，然后在Android模拟器上运行，您会看到问题出在哪里。

import React, {useState} from 'react';
import { TextInput, TouchableOpacity, StyleSheet, View } from 'react-native';

let text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";

export default function App() {
  const [extend, setExtend] = useState(false);
  return (
    <View style={styles.container}>
    <TouchableOpacity style={{width:"50%", height:"50%", backgroundColor:"#9fa"}}
      onPress={()=>{setExtend(!extend)}}
    >
      <TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
      />
    </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  },
});

原文

I'm trying to make something similar to a creator's comment under a post on Instagram. If the text is longer, only the first line will be visible. You can read the rest by clicking the three dots or read more. In this case, I am using TextInput and enabling and disabling multiline on press. While everything works fine, there is a strange issue where on Android devices you will see the last part of the text rather than the first when you enable multiline and then disable it. Everything works as expected on iOS devices. What can I do to solve this problem? My first thought was to scroll to the beginning of the text, but I do not know how and I need help with that. Please feel free to suggest other ways to solve this problem. Here is an example that I made so you can see what my problem is. Run it on IOS emulator and you'll see how it's supposed to run, then on an Android emulator and you'll see what the problem is.

import React, {useState} from 'react';
import { TextInput, TouchableOpacity, StyleSheet, View } from 'react-native';

let text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";

export default function App() {
  const [extend, setExtend] = useState(false);
  return (
    <View style={styles.container}>
    <TouchableOpacity style={{width:"50%", height:"50%", backgroundColor:"#9fa"}}
      onPress={()=>{setExtend(!extend)}}
    >
      <TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
      />
    </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems:'center'
  },
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

む无字情书 2025-02-20 02:28:35

尝试添加此：选择= {{start：0}}

<TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
        selection={{ start: 0 }} // <- Add this
      />

Try add this: selection={{ start: 0 }}

<TextInput
        value={text}
        multiline={extend}
        editable={false}
        color={"#000"}
        allowFontScaling={false}
        selection={{ start: 0 }} // <- Add this
      />

回复收藏 0 原文

~没有更多了~