Flex 没有使用 React Native 来制作计算器布局

Question

我正在尝试通过制作一个计算器应用程序来学习 React Native，但我无法在其中处理布局，更准确地说，按钮没有显示为 width: '22.5%'，所以它会填满整行，在其他属性正常工作时。

这里是 Index.js：

import { StatusBar } from 'expo-status-bar';
import { Text, View, SafeAreaView, Button } from 'react-native';
import styles from './Styles';

export default function Home() {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style='auto' />
      <View style={styles.screenview}>
        <Text>0</Text>
      </View>
      <View style={styles.touchpad}>
        <View style={styles.singleline}>
          <Button style={styles.button} title='AC' />
          <Button style={styles.button} title='CE' />
          <Button style={styles.button} title='%' />
          <Button style={styles.button} title='/' />
        </View>

        <View style={styles.singleline}>
          <Button style={styles.button} title='7' />
          <Button style={styles.button} title='8' />
          <Button style={styles.button} title='9' />
          <Button style={styles.button} title='*' />
        </View>

        <View style={styles.singleline}>
          <Button style={styles.button} title='4' />
          <Button style={styles.button} title='5' />
          <Button style={styles.button} title='6' />
          <Button style={styles.button} title='-' />
        </View>

        <View style={styles.singleline}>
          <Button style={styles.button} title='1' />
          <Button style={styles.button} title='2' />
          <Button style={styles.button} title='3' />
          <Button style={styles.button} title='+' />
        </View>

        <View style={styles.singleline}>
          <Button style={styles.button} title='0' />
          <Button style={styles.button} title='.' />
          <Button style={styles.button} title='=' />
          <Button style={styles.button} title='Settings' />
        </View>
      </View>
    </SafeAreaView>
  );
}

这是我在应用中使用的样式：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  screenview: {
    width: '100%',
    height: '10%'
  },
  touchpad: {
    flex: 1,
    width: '100%',
    height: '90%',
  },
  singleline: {
    flex: 1,
    flexDirection: 'row',
    width: '100%',
    height: '22.5%',
  },
  button: {
    width: '25%',
    height: '100%',
    color: 'green',
    backgroundColor: 'purple'
  },
});

export default styles;

这是 iPhone 13 的外观：

Answer 1

试试这种样式

singleline: {
    flex: 1, // no needed
    flexDirection: 'row',
    width: '100%',
    height: '22.5%',
  },
  button: {
    flex: 0.25, // added
    ....
  }