在多行文本旁边反应本地图像？

2024-04-28 • 问答

我旁边有一个复选框，上面有文本，要求在单词的最后附加一个图像（即图标）以获取更多信息。我还没有找到一种可靠的方法来做到这一点。唯一的方法是将文本分成不同的块，然后包装图标的父级或绝对位置-最终两种方法最终都取决于大小在不同设备上的位置。

当我在文本中添加图像时，我得到了文件图标的怪异背景图像。

当我将其保留在外面时，它仅默认为文本块的末尾：

我的代码段：

<View style={{ flexDirection: 'row' }}>
  <Checkbox style={styles.checkbox} checked={agreedChecked} />
  <View style={{ flexDirection: 'row',flex: 1 }}>
    <Text style={[ styles.label]}>Yes,I agree to using this payment method for automatic monthly charges.</Text>
    <Image source={require('../../assets/Icon_Info.png')} />
  </View>
</View>

放大显示奇怪的文件背景：（请注意，在text元素之外时，它没有背景）

huzhuangc 回答：在多行文本旁边反应本地图像？

您可以简单地复制并粘贴此代码段并进行尝试吗？这个对我有用。如果您愿意，我可以为您创建一个存储库。

Github示例存储库

https://github.com/WrathChaos/react-native-text-ends-with-icon-example

import React from "react";
import {
  SafeAreaView,Image,View,Text,StatusBar,TouchableOpacity
} from "react-native";

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={{ flexDirection: "row" }}>
          {/* <Checkbox style={styles.checkbox} checked={agreedChecked} /> */}
          <View style={{ flexDirection: "row",flex: 1 }}>
            <Text style={{ color: "#757575" }}>
              Yes,I agree to using this payment method for automatic monthly
              charges.{" "}
              <TouchableOpacity onPress={() => {}}>
                <Image
                  style={{ height: 15,width: 15 }}
                  source={require("./assets/icon.png")}
                />
              </TouchableOpacity>
            </Text>
          </View>
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

如果有人偶然发现，这是一个已知的错误，已在React Native 0.61.4中修复！

https://github.com/facebook/react-native/pull/26653

icons image react-native text

本文链接：https://www.f2er.com/3114932.html

在多行文本旁边反应本地图像？

huzhuangc 回答：在多行文本旁边反应本地图像？

大家都在问