Reactネイティブ `alignItems： 'flex-end'`はTabBarIOSコンポーネントのコンテンツを隠します

Question

この質問はthis oneと似ていますが、私は異なる要件があります。私は<Camera>をreact-native-cameraからレンダリングする<TabBarIOS>コンポーネントを持っています。 <Camera>コンポーネントの下部にあるが、<TabBarIOS>コンポーネントの上に写真を撮るためのボタンを配置する必要があります。

index.ios.jsalignItems: 'flex-end'が入っているとき、私はいろいろなことを試してみたが、キャプチャボタンが常に隠されている

import React, { Component } from 'react'; 
import { 
    Dimensions, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import Camera from 'react-native-camera'; 

export default class CameraTab extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    }; 

    render() { 
    return (
     <Camera 
     ref={(cam) => { 
      this.camera = cam; 
     }} 
     style={styles.preview} 
     aspect={Camera.constants.Aspect.fill}> 
     </Camera> 
    ); 
    } 

    takePicture() { 
    this.camera.capture() 
     .then((data) => console.log(data)) 
     .catch(err => console.error(err)); 
    } 
} 

var styles = StyleSheet.create({ 
    preview: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'flex-end', 
    height: Dimensions.get('window').height, 
    width: Dimensions.get('window').width 
    }, 
    capture: { 
    backgroundColor: '#fff', 
    borderRadius: 5, 
    color: '#000', 
    height: 20 
    } 
}); 

module.exports = CameraTab; 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    TabBarIOS, 
    ScrollView, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import CameraTab from './views/CameraTab.ios.js'; 
import FilesTab from './views/FilesTab.ios.js'; 
import Icon from 'react-native-vector-icons/MaterialIcons'; 

export default class MyApp extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedTab: 'cameraTab' 
    }; 
    }; 

    _renderContent() { 
    switch (this.state.selectedTab) { 
     case "filesTab": 
     return <FilesTab style={styles.tabContent}></FilesTab>; 
     case "cameraTab": 
     return <CameraTab style={styles.tabContent}></CameraTab>; 
     case "settingsTab": 
     return <View style={styles.tabContent}></View>; 
     default: 
     return <View style={styles.tabContent}></View>; 
    } 
    }; 

    render() { 
    return (
     <TabBarIOS 
     tintColor="#3498db" 
     barTintColor="#ecf0f1"> 
     <Icon.TabBarItemIOS 
      title="Files" 
      iconName="folder" 
      selected={this.state.selectedTab === "filesTab"} 
      onPress={() => { 
      this.setState({ 
       selectedTab: "filesTab", 
      }); 
      }}> 
      {this._renderContent()} 
     </Icon.TabBarItemIOS> 
     <Icon.TabBarItemIOS 
      title="Camera" 
      iconName="photo-camera" 
      badge={this.state.notifCount > 0 ? this.state.notifCount : undefined} 
      selected={this.state.selectedTab === "cameraTab"} 
      onPress={() => { 
      this.setState({ 
       selectedTab: "cameraTab", 
       notifCount: this.state.notifCount + 1, 
      }); 
      }}> 
      {this._renderContent()} 
     </Icon.TabBarItemIOS> 
     <Icon.TabBarItemIOS 
      title="Settings" 
      iconName="settings" 
      selected={this.state.selectedTab === 'settingsTab'} 
      onPress={() => { 
      this.setState({ 
       selectedTab: "settingsTab", 
       presses: this.state.presses + 1 
      }); 
      }}> 
      {this._renderContent()} 
     </Icon.TabBarItemIOS> 
     </TabBarIOS> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    tabContent: {}, 
}); 

AppRegistry.registerComponent('myapp',() => myApp); 

CameraTab.ios.jsコンテナコンポーネントのスタイル。

それは次のようになります。

編集：私は回避策（カメラコンポーネントの外にボタンコンポーネントを配置）について説明this issueを発見した。 Height and WidthのRNのドキュメントによると、このソリューションはすべての画面のディメンションで機能するようです。しかし、私はカメラの中にアイコン付きのサブビューが必要なので、これは私のためには機能しません。

Answer 1

OK、最終的に修正しました。私は問題がpreviewスタイルの高さと幅と関係していたと思います。作業コード：

import React, { Component } from 'react'; 
import { 
    Dimensions, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View 
} from 'react-native'; 
import Camera from 'react-native-camera'; 
import Icon from 'react-native-vector-icons/Ionicons'; 

export default class CameraTab extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {}; 
    }; 

    render() { 
    return (
     <View style={styles.container}> 
     <Camera 
      ref={(cam) => { 
      this._camera = cam; 
      }} 
      style={styles.preview} 
      aspect={Camera.constants.Aspect.fill} 
      captureTarget={Camera.constants.CaptureTarget.disk}> 
      <TouchableHighlight 
       style={styles.cameraButton} 
       onPress={this._takePicture.bind(this)}> 
       <Icon name="ios-qr-scanner" size={55} color="#95a5a6" /> 
      </TouchableHighlight> 
     </Camera> 
     </View> 
    ); 
    } 

    _takePicture() { 
    this._camera.capture() 
     .then((data) => { 
     console.log(data) 
     }) 
     .catch((err) => { 
     console.error(err) 
     }); 
    } 
} 

var styles = StyleSheet.create({ 
    cameraButton: { 
    flex: 0, 
    flexDirection: 'row', 
    marginBottom: 60, 
    }, 
    container: { 
    flex: 1, 
    }, 
    preview: { 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'flex-end', 
    justifyContent: 'space-around' 
    }, 
}); 

module.exports = CameraTab;