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

Posted 2023-03-11

【中文标题】React Native`alignItems：\'flex-end\'`隐藏TabBarIOS组件中的内容

【英文标题】：React Native `alignItems: 'flex-end'` hides content in TabBarIOS componentReact Native`alignItems：'flex-end'`隐藏TabBarIOS组件中的内容

【发布时间】：2016-12-30 21:56:24

【问题描述】：

这个问题类似于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 上的文档，该解决方案似乎适用于所有屏幕尺寸。但是这对我不起作用，因为我想要一个在相机内带有图标的子视图。

【参考方案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;