如何在React Native中删除可触摸不透明度组件之间的空间

Question

问题：

我创建了带有三个可触摸不透明度组件的react native组件。它像这样显示。

这是我的代码的外观。

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import LangaugeCard from './LanguageCard';
import styles from '_styles/homescreen';

class Localization extends Component {
  render() {
    return (
      <View style={styles.localization_container}>
        <TouchableOpacity>
          <LangaugeCard language="Hindi" />
        </TouchableOpacity>
        <TouchableOpacity>
          <LangaugeCard language="English"  />
        </TouchableOpacity>
        <TouchableOpacity>
          <LangaugeCard language="French" />
        </TouchableOpacity>
      </View>
    );
  }
}

export default Localization;

我的语言卡看起来像这样。

/* eslint-disable prettier/prettier */
import React from 'react';
import {View, Text} from 'react-native';
import styles from '_styles/homescreen';

const LanguageCard = (props) => {
  const {language, instruction} = props;
  return (
    <View style={styles.langauge_card}>
      <View style={styles.langauge_view}>
        <Text style={styles.language}>{language}</Text>
      </View>
      <View style={styles.instruction_view}>
        <Text style={styles.instruction}>{instruction}</Text>
      </View>
    </View>
  );
};

export default LanguageCard;

这是我的样式文件。

/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#eeeeee',
    height: '100%',
    justifyContent: 'center',
  },
  localization_container: {
    flex: 1,
  },
  langauge_card: {
    backgroundColor: '#ffffff',
    height: '46%',
    marginLeft: '5%',
    marginRight: '5%',
    borderRadius:35,
    flexDirection:'row',
    elevation: 1,
  },
  langauge_view:{
    backgroundColor:'#007aff',
    marginTop: '8%',
    marginBottom: '8%',
    marginLeft:'8%',
    borderRadius: 15,
    width:'30%',
    justifyContent: 'center',
  },
  language:{
    fontFamily:'IskoolaPota',
    fontSize:24,
    textAlign:'center',
    color:'#ffffff',
    justifyContent:'center',
  },
  instruction_view:{
    marginTop: '8%',
    marginBottom: '8%',
    marginLeft:'5%',
    justifyContent: 'center',
  },
  instruction:{
    color:'#444444',
    fontSize: 15,
  },
});

export default styles;

我想做的是减少可触摸组件之间的空间，并将所有三个按钮都放在屏幕中央，我尝试了很多方法来找到一种方法，但是这没有做到。有人可以通过修改代码来帮助我实现这一目标吗？谢谢

Answer 1

在这种情况下，使用百分比作为高度并不是我的好主意。现在，您的TouchableOpacity不在屏幕上，因为您有height: '46%',。因为您有3个，所以它的高度为138％+填充和边距。

我更喜欢使用flex并使用justifyContent进行水平对齐，而align-items进行垂直对齐

所以就您而言，

langauge_card:{
 flex: 1,
}
langauge_view:{
 flex: 1,
 alignItems: "center",
 justifyContent: "center"
}
instruction_view:{
 flex: 1,
 alignItems: "center",
 justifyContent: "center"
}

您可以在flex，margin和“ flex-start”，“ center”，“ flex-end”之间进行调整，以证明内容和alignItem的合理性。

希望这有所帮助。

Answer 2

将这些样式放入localization_container

  { 
   flex: 1,
   alignItems: 'center',
   JustifyContent: 'center'
  }

这些样式将确保儿童视图内的项目位于屏幕的shown in the center处，然后一一删除容器的高度（如果有的话），请避免使用%，因为这可能无法预测。