5

就我而言，我想要一个顶部有一个按钮的全屏浏览器。在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 是进行应用开发布局的非常有效的方法。

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

在此处输入图像描述

4

1 回答 1

1

position: absolute不是绝招。这是正常的解决方案。将absolute视图视为另一层。所以alignItems在上一层定义不会影响当前层的子层。

您不需要使用Dimensions. 如果您需要全宽按钮right: 0，您可以简单地添加。TouchableHighlight

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

于 2016-11-27T14:08:10.700 回答