对于React Native有没有像Relativelayout这样的东西？

Question

在我的情况下，我想要一个全屏viewpager，顶部有一个按钮。这在Android中很简单。

以下是示例代码

<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>

但是在rn中，似乎flexbox在Android中就像Linearlayout一样，父母的兄弟姐妹不能相互重叠。我不认为它在移动开发中有意义，因为移动开发中常见多层。我通过使用 position：absolute 来解决问题。该解决方案的缺点是，如果使用绝对位置， alignItems 不起作用，因此您需要执行另一个技巧以使按钮居中。有没有更好的方法？ RN会支持像RelativeLayout这样的东西吗？我认为Relativelayout是进行app dev布局的一种非常有效的方式。

这是我的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>
        );

Answer 1

position: absolute不是绝招。这是正常的解决方案。将absolute次观看为其他图层。因此，上一层中定义的alignItems不会影响当前图层子项。

您无需使用Dimensions。如果您需要全宽按钮，只需将right: 0添加到TouchableHighlight。

Flexbox并不理想，但它足够简单和强大。我不认为很快就会推出别的东西。