Is there something like Relativelayout for React Native?

Question

In my case, i want a fullscreen viewpager with a button on the top of it. It's easy in Android.

Here is the sample code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent >

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:src="@drawable/button_help" />
</RelativeLayout>

but in rn , it seems that flexbox acts like Linearlayout in Android that siblings of parent cannot overlap each other. I don't think it make sense in mobile dev since multiple layers is common in mobile dev. I got a trick to solve the issue by using position: absolute. The drawback of the solution is that alignItems take no effect if using absolute position so you need to do another trick to make button center in horizon. Is there any better way? Anything like RelativeLayout would be supported in RN? I think Relativelayout is the very efficient way to do the layout of app dev.

Here is my code of RN

render() {
        var {height, width} = Dimensions.get('window');
        console.log("rntest width " + width);
        var mywidth = width;
        return(
        <View
          style={styles.viewPager}>
            <IndicatorViewPager
            style={styles.viewPager}
            initialPage={0}
            onPageScroll={onPageScroll}
            onPageSelected={onPageSelected}>
              <View
                style={styles.viewPager}>
                <Image
                  style={styles.viewPager}
                  source={require('./img/1.jpg')}
                  resizeMode='cover'/>
              </View>
              <View
                style={styles.viewPager}>
                <Image
                  style={styles.viewPager}
                  source={require('./img/2.jpg')}
                  resizeMode='cover'/>
              </View>
              <View
                style={styles.viewPager}>
                <Image
                  style={styles.viewPager}
                  source={require('./img/3.jpg')}
                  resizeMode='cover'/>
              </View>
            </IndicatorViewPager>
            <TouchableHighlight onPress={onPressButton} style={{width: mywidth, height: 103,  
              position:'absolute', left: 0, bottom: 0, alignItems: 'center'}}>
              <Image
              style={{width: 103, height: 103}}
              source={require('./img/voice_run.png')}
             />
            </TouchableHighlight>
         }
        </View>
        );

score 1 · Answer 1 · answered Nov 27 '16 at 14:08

position: absolute is not trick. It is normal solution. Think about absolute views as about another layers. So alignItems defined in previous layer will not affect current layer childs.

You do not need to use Dimensions. You can simply add right: 0 to TouchableHighlight if you need full width button.

Flexbox is not ideal but it is simple and powerful enough. I don't think something else will be introduced soon.

Is there something like Relativelayout for React Native?

1 Answers1