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

如何组合两个 "inline" 元素以便将它们包裹在一起？

更新.代码：

...

    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 supports nesting, styling, and touch handling.

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

正如您正确注意到的那样，这个

leaves a user without nice animation provided by <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 你可以找到一个有效的例子。希望这对您有所帮助！

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

React Native: how to combine inline elements so they get wrapped together

react-native

word-wrap

react-native-flexbox