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

Question

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

[(<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
    }
});

结果：

Answer 1

1.开始解决方案

根据官方文件：

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

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

正如你所说，这个

没有<TouchableOpacity>提供的漂亮动画就留下了一个用户。

我想到了一个更好的解决方案，它不是那么远:)

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

只需用<TouchableOpacity>将<Text>和相关的<View>用逗号包装在一个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>动画。

Here你可以找到一个有效的例子。希望这可以帮助！