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