React Native元素样式优化：实现内容连续排列显示

你的问题核心是每个文本片段被独立的View包裹，且该View设置了justifyContent: 'center'，导致每个片段独占一行。要实现连续排列+自动换行，可按以下方式调整：

1. 修正结构与样式 #

把所有文本片段（包括后续要插入的按钮）放在同一个外层容器中，利用flexWrap实现自动换行，同时修正文本分割逻辑以保留原标记（方便后续替换按钮）：

function Test() {
    const text = "Jackie Chan is one of the [1] martial artist of all [2]."
    // 匹配文本段和标记，避免split丢失[1][2]
    const contentParts = text.match(/(.*?)(\[\d+\]|$)/g).filter(Boolean);

    return (
        <View style={styles.contentWrapper}>
            {contentParts.map((part, index) => {
                // 判断是否是标记位，后续替换为按钮
                if (/\[\d+\]/.test(part)) {
                    return <Text key={index} style={styles.tag}>{part}</Text>;
                }
                return <Text key={index} style={styles.textSegment}>{part}</Text>;
            })}
        </View>
    );
}

const styles = StyleSheet.create({
    contentWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap', // 开启自动换行
        alignItems: 'center',
        paddingHorizontal: 16,
    },
    textSegment: {
        fontSize: 24,
        borderWidth: 1,
        borderColor: 'green',
    },
    tag: {
        fontSize: 24,
        color: '#0066cc',
        marginHorizontal: 4,
        // 后续替换为按钮时，这里改成按钮样式即可
    },
})

2. 关键说明 #

• 外层容器contentWrapper通过flexDirection: row+flexWrap: wrap，让子元素横向排列并在空间不足时自动换行
• 用match替代split，保留原文本中的[1][2]标记，方便后续替换为动态按钮
• 每个文本段和标记不再单独套独立的View，直接作为外层容器的子元素，自然占据自身所需空间，不会独占一行

内容的提问来源于stack exchange，提问作者sisko