React Native custom component doesn't set component's size dynamically

问题

I'm trying to build an RN component that displays Tweets. I forked a great RN component, react-native-fabric-twitterkit and added a component that displays a tweet. So far so good but when I want to display that Tweet inside a ScrollView I have to specify the components height and width otherwise it won't get displayed. Any idea what am I doing wrong?

Here is my forked RN component: https://github.com/adamivancza/react-native-fabric-twitterkit

And here is a test application that showcases my issue: 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>

回答1:

The github issue linked by @smilledge has the answer.

When adding views dynamically in a native component it seems you need to manually trigger a layout cycle in order for react-native to pick up on the changes. (perhaps related to react native updating it's shadow-view)

 @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());
        }
    };

来源：https://stackoverflow.com/questions/40291150/react-native-custom-component-doesnt-set-components-size-dynamically

标签

ios

react-native

twitter-fabric