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

Question

此题与 however I have different requirements. I have a <TabBarIOS> component that renders a <Camera> from 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' 处于容器组件的样式中时，捕捉按钮总是隐藏的。

它应该看起来像这样：

编辑： 我发现 this issue that describes a workaround (placing the button component outside of the camera component). According to RN's docs on 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;

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

React Native `alignItems: 'flex-end'` hides content in TabBarIOS component

react-native

react-native-camera

tabbarios

react-native-flexbox