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

Question

Этот вопрос похож на этот, но у меня другие требования. у меня есть <TabBarIOS> компонент, который делает <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' в стиле компонента контейнера.

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

Изменить: я обнаружил эту проблему, которая описывает обходной путь (размещение компонента кнопки за пределами компонента камеры). Согласно документации RN по высоте и ширине, кажется, что это решение будет работать для всех размеров экрана. Однако это не работает для меня, потому что я хочу 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;