我有一个逗号分隔的内联可触摸列表,如下所示:
[(<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
}
});
结果: