React Native`alignItems：'flex-end'`隐藏TabBarIOS组件中的内容

Question

这个问题类似于this one但是我有不同的要求。我有一个<TabBarIOS>组件，它可以从react-native-camera提供<Camera>。我需要放置一个按钮在<Camera>组件的底部拍摄一张照片，但在<TabBarIOS>组件的上方。

index.ios.js

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

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; 

我已经试过各种事情，但拍摄按钮总是时隐时alignItems: 'flex-end'在容器组件的风格。

它应该是这个样子：

编辑：我发现this issue描述一种解决方法（放置按钮组件相机组件之外）。根据RN关于Height and Width的文档，似乎此解决方案适用于所有屏幕尺寸。然而，这对我来说不起作用，因为我想要一个带相机内图标的子视图。

Answer 1

好的，终于修好了。我认为这个问题与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;