2
私はここに、navbarにロゴを入れる必要があるアプリがあります。シーンレイアウトをオーバーフローさせる必要があります。イオスでうまく動作しますが、アンドロイドでは動作していないようです。コードを画像の下に置きます。あなたが見ることができるように、私はEStyleSheetを使って％を使用させます。アンドロイドでリアクションネイティブのAndroidで要素のオーバーフローが隠されています
IOS
アンドロイド
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>
);
ああ、これはとても良いニュースです！ – martinarroyo