スタイルが反応ネイティブ

Question

私にIOSとAndroidで異なる機能をレンダリングし、次のとおりです。

render() { 
     return (
      <View style={styles.container}> 
       <Camera 
        style={styles.camera} 
        ref={(cam) => { 
         this.camera = cam; 
        }} 
        onZoomChanged={this.onZoomChanged.bind(this)} 
        onFocusChanged={this.onFocusChanged.bind(this)} 
        torchMode={this.state.torch} 
        flashMode={this.state.flash}> 
        {this.imageOverlay()} 
       </Camera> 
       <View style={styles.commandBar}> 
        <TouchableHighlight onPress={this.fromLocal.bind(this)}> 
         <View style={styles.capture}> 
          <Icon .../> 
         </View> 
        </TouchableHighlight> 

        <TouchableHighlight onPress={this.takePicture.bind(this)}> 
         <View style={styles.captureN}> 
          <Icon style={{transform: [{rotate: '90deg'}],}} .../> 
         </View> 
        </TouchableHighlight> 

        <TouchableHighlight onPress={this.onTorchToggle.bind(this)}> 
         <View style={styles.capture}> 
          <Icon ... /> 
         </View> 
        </TouchableHighlight> 
       </View> 
      </View> 
     ); 
    } 

私はテコードを小さくするために上記のコードからI少数TouchableHighlightを削除しました。私は風景モードでのイメージオーバーレイで写真を撮りたい

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     flexDirection: 'column' 
    }, 

    camera: { 
     justifyContent: 'flex-end', 
     alignItems: 'center', 
     width: dw.width, 
     height: dw.height, 
     flexDirection:'column' 
    }, 
    commandBar: { 
     flex: 0, 
     bottom: 85, 
     flexDirection: 'row', 
     alignItems: 'center', 
     justifyContent: "center" 
    }, 
    capture: { 
     backgroundColor: '#444', 
     opacity: 0.7, 
     borderRadius: 5, 
     padding: 8, 
     paddingTop: 5, 
     paddingBottom: 5, 
     width: 55, 
     marginLeft: 8, 
     alignItems: 'center', 
     transform: [{rotate: '90deg'}], 
    }, 

    firstCapture: { 
     marginLeft: 0 
    }, 

    captureN: { 
     backgroundColor: '#444', 
     opacity: 0.7, 
     borderRadius: 5, 
     padding: 10, 
     width: 60, 
     marginLeft: 8, 
     alignItems: 'center' 
    }, 
    imageContainer: { 
     flexDirection: 'row', 
     alignItems: 'flex-end' 
    }, 
    innerImage: { 
     flex: 0, 
     height: dw.width, 
     width: dw.height, 
     marginBottom: 170, 
     resizeMode: 'contain', 
     transform: [{rotate: '90deg'}] 
    } 

}); 

次のように

そしてスタイルがあります。

任意のアイデアはどのようにそれを解決するために、次のよう

しかし、それは動作しませんAndroid上 が、私は画面を取得しています：IOS上では、それはように見えますが、正常に動作しますか？

Answer 1

AndroidやiOSのプラットフォームでさまざまなスタイルを試してみることもできます。

import { Platform, StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, }); 

出典：React Native Platform

たとえば、