React Native Android原生模块如何访问子视图Props？

我明白你遇到的问题了——在@ReactProp注解的方法里调用getChildCount()返回0，但JS端明明传递了子组件，这其实是RN组件生命周期的时机问题导致的。

问题原因 #

@ReactProp的回调会在组件初始化、props更新时触发，但此时RN还没有完成子组件的挂载和添加流程，你的ReactViewGroup还没有接收到子视图，所以返回0是正常现象。

可行的解决思路 #

1. 重写ReactViewGroup的onAfterUpdateChildren方法

RN提供了onAfterUpdateChildren这个生命周期方法，专门用于通知容器组件子元素已经更新完成。在这个方法里，你可以安全地获取到所有子视图：

public class NativeAndroidComponentView extends ReactViewGroup {
    public NativeAndroidComponentView(Context context) {
        super(context);
    }

    @Override
    protected void onAfterUpdateChildren() {
        super.onAfterUpdateChildren();
        // 此时子视图已经完全添加
        int childCount = getChildCount();
        Log.e("Child count", String.valueOf(childCount));
        
        // 遍历处理所有子视图
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            // 在这里编写你的子视图处理逻辑
        }
    }
}

2. 监听子视图的添加/移除事件

如果需要实时响应子视图的添加或移除，可以给ReactViewGroup设置OnHierarchyChangeListener：

public class NativeAndroidComponentView extends ReactViewGroup {
    public NativeAndroidComponentView(Context context) {
        super(context);
        setupHierarchyListener();
    }

    private void setupHierarchyListener() {
        setOnHierarchyChangeListener(new OnHierarchyChangeListener() {
            @Override
            public void onChildViewAdded(View parent, View child) {
                // 当子视图被添加时立即触发
                Log.e("子视图已添加", child.getClass().getSimpleName());
                // 处理新添加的子视图
            }

            @Override
            public void onChildViewRemoved(View parent, View child) {
                // 处理子视图被移除的逻辑（如果需要）
            }
        });
    }
}

3. 不推荐：延迟获取子视图（仅临时应急）

如果你必须在@ReactProp的方法里处理，可以通过postDelayed延迟执行，等待子组件挂载完成。但这个方法不够可靠，因为延迟时间无法精确控制，不建议用于生产环境：

@ReactProp(name = "name")
public void setName(ReactViewGroup view, String name) {
    view.postDelayed(() -> {
        Log.e("Do we have childs ?", String.valueOf(view.getChildCount()));
        // 这里可以尝试获取子视图
    }, 100); // 延迟时间根据实际情况调整
}

补充说明 #

React Native中JS端的props.children在原生端就是通过子视图的形式添加到ReactViewGroup中的，所以你通过getChildAt(index)获取到的View就是对应JS子组件的原生实例。如果有多个子组件，只需遍历getChildCount()即可全部获取。

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