2

私の場合は、ボタンの上にフルスクリーンのビューページャーが必要です。 Androidでは簡単です。ここでReact NativeのRelativelayoutのようなものがありますか?

サンプルコード

<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であり、フレックスボックスが親の兄弟が重ならないことをアンドロイドでのLinearLayoutのような役割を果たしているようです。私は複数の層がモバイルdevで一般的であるので、モバイルdevでそれが意味をなさないと思います。 の位置を使用してこの問題を解決するためのトリックを得ました:絶対。ソリューションの欠点は、alignItemsは、絶対位置を使用する場合は効果がないので、別のトリックを実行してボタン中心を水平にする必要があることです。もっと良い方法はありますか? RelativeLayoutのようなものはRNでサポートされますか?私は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> 
     ); 

enter image description here

答えて

1

position: absoluteの私のコードをだますされていないです。それは通常の解決策です。 absoluteについて別のレイヤーと考えるしたがって、前のレイヤで定義されたalignItemsは、現在のレイヤの子には影響しません。

Dimensionsを使用する必要はありません。全角ボタンが必要な場合はright: 0TouchableHighlightに追加するだけです。

Flexboxは理想的ではありませんが、シンプルで強力です。私はすぐに何か他のものが紹介されるとは思わない。

0

あなたが探しているのはFlex Boxです。シンプルで強力です。
フレックスボックスの詳細については、彼女を参照することができます。

A Complete Guide to Flexbox

それはUに大いに役立つだろうコードやスタイルが含まれています

関連する問題