React Native `alignItems: 'flex-end'` скрывает содержимое в компоненте TabBarIOS

Question

Этот вопрос похож на this one, однако у меня разные требования. У меня есть компонент <TabBarIOS>, который отображает <Camera> от react-native-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' находится в контейнерный компонент.

Это должно выглядеть примерно так:

Edit: Я обнаружил this issue, описывающий обходной путь (размещения компонента кнопки вне компонента камеры). Согласно документам RN на Height and Width кажется, что это решение будет работать для всех размеров экрана. Однако это не работает для меня, потому что я хочу Subview с иконками внутри камеры.

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;