web-dev-qa-db-ja.com

React-Nativeに隠された要素のオーバーフローAndroid

ここにアプリがあり、navbarにロゴを配置する必要があります。シーンレイアウトをオーバーフローさせる必要があります。 Iosで問題なく動作しますが、Androidは動作していないようです。コードを画像の下部に配置します。

IOS

enter image description here

Android

enter image description here

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import EStyleSheet from 'react-native-extended-stylesheet';
import { View, Platform } from 'react-native';
import { SmallLogo } from './components';
import { checkColor } from './helpers';
import {
  HomeScreen,
  ImagePickerScreen,
  WaitingResponseScreen,
  ResultsScreen
} from './modules';
import Colors from '../constants/Colors';

const styles = EStyleSheet.create({
  navStyle: {
    flex: 1,
    marginTop: '5%',
    alignItems: 'center',
  },
  logoCircle: {
    backgroundColor: '$whiteColor',
    height: 60,
    width: 60,
    borderRadius: 30,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

const logoNav = result => (
  <View style={styles.navStyle}>
    <View style={styles.logoCircle}>
      <SmallLogo color={checkColor(result)} />
    </View>
  </View>
);

const pdTop = Platform.OS === 'ios' ? 64 : 54;

export default () => (
  <Router
    sceneStyle={{ paddingTop: pdTop }}
    navigationBarStyle={{ backgroundColor: Colors.greenColor }}
    renderTitle={props => {
      if (props.result) {
        return logoNav(props.result);
      }
      return logoNav(null);
    }}
    backButtonTextStyle={{ color: Colors.whiteColor }}
    leftButtonIconStyle={{ tintColor: Colors.whiteColor }}
  >
    <Scene
      key="home"
      component={HomeScreen}
    />
    <Scene
      key="imagesPicker"
      hideBackImage
      component={ImagePickerScreen}
    />
    <Scene
      key="waitingResponse"
      backTitle="Back"
      component={WaitingResponseScreen}
    />
    <Scene
      key="results"
      backTitle="Back"
      initial
      component={ResultsScreen}
    />
  </Router>
);
androidreactjsreact-nativereact-native-android
10
EQuimper

Androidでは、コンポーネントの境界外に描画することはできません。これは非常に迷惑なことです。回避策として、通常、次のことを行います。以前のコンテナーとオーバーフローデータの両方をラップする新しい<View>でコンポーネントをラップします。ビューbackgroundColorを'transparent'に設定して非表示にし、pointerEvents propを'box-none'に設定して、イベントが子に伝搬されるようにします。ビューの寸法は、前の上部コンポーネントの寸法にオーバーフローを加えたものである必要があります（あなたの場合は高さだけです）が、これはFlexboxでもうまく機能するはずです。

21
martinarroyo

これは非常に重要な既知の問題です。

ここに投票してください 問題にもっと注意を向けます。

8
GollyJer

Martinarroyoの答えをフォローアップします。残念ながら、彼は正しい。現在のところ、より良い方法はない。しかし、react-native 0.41（まだ安定していない）は、Android overflow: visibleこれは素晴らしいニュースです。回避策はそれほど楽しくないからです...

2
Dror Aharon

同様の問題があり、medium.comでこのすばらしい記事を見つけました。 https://medium.com/entria/solving-view-overflow-in-Android-reactnative-f961752a75cd

記事によると、react-native-view'overflowライブラリ（react-native Androidのオーバーフローをサポートするために記述されたブリッジングヘッダー。

必要なことは、overflowcomponentを<ViewOverflow>。お役に立てれば！

2
Rachit

Sibelius Seraphiniの react-native-view-overflow nativeモジュールを使用できます。

また、これは、 this commitに従って、バージョン0.57以降のReact Nativeですぐにサポートされるようです。

0
TheBaj