小编gon*_*ong的帖子

React Native 是否有类似relativelayout 的东西?

就我而言,我想要一个全屏视图页面,顶部有一个按钮。在 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>
Run Code Online (Sandbox Code Playgroud)

但在 rn 中,flexbox 的作用似乎类似于 Android 中的 Linearlayout,父级的兄弟姐妹不能相互重叠。我认为这在移动开发中没有意义,因为多层在移动开发中很常见。我有一个技巧通过使用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 …
Run Code Online (Sandbox Code Playgroud)

layout android-viewpager android-relativelayout react-native react-native-flexbox

5
推荐指数
1
解决办法
6802
查看次数