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，您可以找到一个有效的示例。希望这会有所帮助！

React Native：如何合并内联元素以使它们包装在一起

1 个答案: