React 네이티브 사용자 지정 구성 요소가 구성 요소의 크기를 동적으로 설정하지 않습니다.

Question

트윗을 표시하는 RN 구성 요소를 작성하려고합니다. 훌륭한 RN 구성 요소 인 react-native-fabric-twitterkit을 포크하고 트윗을 표시하는 구성 요소를 추가했습니다. 지금까지는 그렇게 좋았지 만, ScrollView 안에서 그 트윗을 표시하고 싶을 때, 구성 요소의 높이와 너비를 지정해야만 그렇지 않으면 표시되지 않습니다. 어떤 생각인지 내가 뭘 잘못 했니?

은 여기 내 포크 RN 구성 요소입니다 : https://github.com/adamivancza/react-native-fabric-twitterkit

그리고 여기 내 문제를 전시 테스트 응용 프로그램입니다 : https://github.com/adamivancza/react-native-twitterkit-test

<View style={styles.container}> 
    <ScrollView 
     style={{ flex: 1 }}> 
     // this component is displayed because I've set a specific height 
     <Tweet 
     style={{ flex: 1, height: 200 }} 
     tweetId='788105828461006848'/> 
     // this component is not displayed 
     <Tweet 
     style={{ flex: 1 }} 
     tweetId='788105828461006848'/> 
    </ScrollView> 
</View> 

Answer 1

@smilledge에 의해 연결된 GitHub의 문제가 답을 가지고있다.

네이티브 구성 요소에서보기를 동적으로 추가 할 때 반응 네이티브가 변경 사항을 인식 할 수 있도록 레이아웃주기를 수동으로 트리거해야하는 것처럼 보입니다. (어쩌면 섀도우 뷰의 원시 업데이트에 반응 할 것입니다)

@Override 
    public void requestLayout() { 
     super.requestLayout(); 
     post(measureAndLayout); 
    } 

    private final Runnable measureAndLayout = new Runnable() { 
     @Override 
     public void run() { 
      measure(
        MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY), 
        MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY)); 
      layout(getLeft(), getTop(), getRight(), getBottom()); 
     } 
    };