React Native(Android)循环生成JSX存入数组后样式显示为{[Object]}问题

问题复现 #

在React Native开发中，创建JSX元素并推入数组后，用console.log打印数组时，父组件View的样式能正常展开显示，但子组件Text的样式却显示为{[Object]}；单独打印该JSX元素时，样式显示完全正常。

相关代码

1. JSX代码

const viewItems = [];
viewItems.push(
    <View style={styles.documentView}>
        <Text style={styles.documentText} onPress={() => Linking.openURL("abc")}>
            xyz
        </Text>
    </View>
)

2. 样式代码

documentView: { flex: 1, width: '100%', flexDirection: 'row', marginBottom:10, alignItems: 'flex-start'},
documentText: {color: 'blue', fontSize: 18}

3. 打印结果

<View style={"alignItems": "flex-start", "flex": 1, "flexDirection": "row", "marginBottom": 10, "width": "100%"}>
    <Text onPress={[Function onPress]} style={[Object]}>xyz</Text>
</View>

4. 验证代码

const view = (
    <View style={styles.documentView}>
        <Text style={styles.documentText} onPress={() => Linking.openURL("abc")}>xyz</Text>
    </View>
);
console.log(view) // 打印正常，子组件样式完整展开
viewItems.push(view);
console.log(viewItems) // 子组件样式显示为{[Object]}

成因解析 #

这只是控制台打印的格式化逻辑问题，样式实际是正常生效的，核心原因如下：

• 单独打印单个JSX元素时，React Native调试器会递归遍历并展开所有嵌套对象，包括子组件的样式对象，因此能看到完整的样式键值对。
• 当JSX元素被放入数组后，控制台为了避免输出内容过于冗长，会对嵌套层级较深的对象做截断处理，仅用{[Object]}标识这是一个对象，不再展开细节。

另外，React Native中通过StyleSheet.create生成的styles对象会带有内部优化标识，但这不会影响样式的实际渲染，只是打印时的显示差异而已。

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