React Native Expo模块中Compose测试Surface无法显示排查

你的TestForm Composable无法显示主要有以下几个核心原因：

1. Material3组件缺少主题上下文 #

你使用的TextField、Button、Card都是Material3组件，这类组件必须在MaterialTheme的包裹下才能正常渲染——它们依赖主题提供的颜色、排版、形状等核心配置，没有主题上下文时，组件会因缺少必要参数而无法渲染，最终呈现空白。

2. Card组件无布局约束 #

Card未设置任何Modifier，默认是自适应内容大小，且没有在父容器中做对齐或填充处理。即便外层Surface占满全屏，Card也会因无定位规则而无法被正常展示。

修复方案 #

修改TestForm.kt代码，补充主题包裹并完善布局约束：

package expo.modules.webview
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun TestForm() {
    // 用MaterialTheme包裹所有Material3组件，提供必要主题配置
    MaterialTheme {
        Surface (
            modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight(),
        ) {
            // 添加Column容器实现Card的居中布局
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Card(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    // 给Card内部添加内边距，避免内容紧贴边缘
                    Column(
                        modifier = Modifier.padding(16.dp)
                    ) {
                        TextField(
                            value = "Value",
                            onValueChange = { /*TODO*/ },
                            label = { Text("输入内容") } // Material3 TextField推荐设置label，避免渲染异常
                        )
                        Spacer(
                            modifier = Modifier.height(15.dp)
                        )
                        Button(
                            onClick = { /*TODO*/ }
                        ) {
                            Text(text = "Click me!")
                        }
                    }
                }
            }
        }
    }
}

同时确认项目build.gradle中已添加Material3依赖：

implementation "androidx.compose.material3:material3:1.1.2"

注：你的ExpoWebView中ComposeView的添加逻辑是正常的，无需修改，核心问题集中在Composable自身的主题和布局配置。

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