时间戳

首页 > 解决方案 > React Native：如何组合内联元素以便将它们包装在一起

react-native - React Native：如何组合内联元素以便将它们包装在一起

问题描述

我有一个逗号分隔的内联可触摸列表，如下所示：

[(<TouchableOpacity><Text>a</Text></TouchableOpacity>),
 (<Text>, </Text>),
 (<TouchableOpacity><Text>b</Text></TouchableOpacity>),
 (<Text>, </Text>),
 (<TouchableOpacity><Text>c</Text></TouchableOpacity>)]

呈现为以逗号分隔的项目字符串：

a, b, c

问题是有时逗号会换行，看起来有点难看：

a, b, c
, d

如何组合两个“内联”元素以便将它们包裹在一起？

更新。代码：

...

    let items1 = [];
    for (let i = 1; i <= 100; i++) {
        const text = makeid(i % 10 + 1);

        items1.push((<TouchableOpacity><Text style={{fontSize: 18}}>{text}</Text></TouchableOpacity>));
        items1.push((<Text style={{fontSize: 18}}>, </Text>));
    }

    return (<View style={styles.li}>
        {items1}
    </View>);

...

// just generates some random string
function makeid(len) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < len; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

const styles = StyleSheet.create({
    li: {
        width: "100%",
        flexDirection: "row",
        flexWrap: "wrap",
        marginBottom: 5,
        paddingLeft: 10
    }
});

结果：

在此处输入图像描述

标签： react-nativeword-wrapreact-native-flexbox

解决方案

1. 启动解决方案

根据官方文档：

Text支持嵌套、样式和触摸处理。

因此，如果您TouchableOpacity只是为了获得onPress支持而添加，那么它是毫无用处的。在这种情况下，您可以简单地删除它并将所有Text块包装在父级中Text，您的问题就解决了。

正如您正确指出的那样，这

让用户没有 . 提供的漂亮动画<TouchableOpacity>。

我想到了一个更好的解决方案，但到目前为止还没有:)

2. 其他（和更好的？）解决方案

<TouchableOpacity>只需将您的和相关的逗号包装<Text>在一个<View>with中flexDirection: 'row'，并将其添加到您要渲染的数组中。

  render() {
    let items1 = [];
    for (let i = 1; i <= 100; i++) {
      const text = makeid((i % 10) + 1);

      items1.push(
        <View style={{ flexDirection: 'row'}}>
          <TouchableOpacity>
            <Text style={{ fontSize: 18 }}>{text}</Text>
          </TouchableOpacity>
          <Text style={{ fontSize: 18 }}>, </Text>
        </View>
      );
    }
    return (
      <View style={styles.li}>{items1}</View>
    );
  }

这样，您可以确定逗号不会与其前一个单词分开，并且您会受益于<TouchableOpacity>动画。

在这里您可以找到一个工作示例。希望这可以帮助！

推荐阅读