layout - React Native 是否有类似relativelayout 的东西？

Question

就我而言，我想要一个全屏 View 页面，顶部有一个按钮。在 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，父级的 sibling 不能相互重叠。我认为这在移动开发中没有意义，因为多层在移动开发中很常见。我通过使用 position:absolute 解决了这个问题。该解决方案的缺点是如果使用绝对位置，alignItems 不起作用，因此您需要使用另一个技巧来使按钮在水平线中居中。还有更好的办法吗？ RN 会支持像RelativeLayout 这样的东西吗？我认为Relativelayout是进行应用程序开发布局的非常有效的方法。

这是我的 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不是技巧。这是正常的解决方案。将绝对 View 视为其他层。因此，前一层中定义的 alignItems 不会影响当前层的子层。

您不需要使用维度。如果您需要全宽按钮，您只需将 right: 0 添加到 TouchableHighlight 即可。

Flexbox 并不理想，但它足够简单且功能强大。我认为很快不会推出其他内容。