Flexbox 不会将自身限制为父宽度并且总是溢出

Question

我很难理解为什么 flexbox 不会将自己限制在父组件的宽度上。我尝试了多种方法，但运气不佳，我的按钮总是溢出父组件。

这是我目前所拥有的：https://snack.expo.io/@mohammedri/smart-bagel

这就是我想要的（前 4 个红色框是按钮，下一个红色框是文本字段，最后一个是重置表按钮）：

我正在使用 UI kitten 进行主题化，但我认为它不会影响结果。我也试过resizeMode，但它似乎不起作用。任何帮助表示赞赏。

我在下面发布了我的大部分代码：

App.js：

export default function App() {
  const Tab = createBottomTabNavigator();

  return (
    <ApplicationProvider {...eva} theme={eva.light}>
      <SafeAreaView style={styles.container}>
        <NavigationContainer>
            {/* ... More code */}
            <Tab.Screen name="Home" component={HomeScreen} />
            {/* ... More code */}
          </Tab.Navigator>
        </NavigationContainer>
      </SafeAreaView>
    </ApplicationProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

HomeScreen.js：

  return (
    <WaterIntakeContext.Provider value={{dayTotalWater, setDayTotalWater}}>
      <View style={styles.container}>
        <View style={styles.statusContainer}>
          <Text style={styles.titleText} category="h3">some text</Text>
          <Text style={styles.subtitleText} category="h6">some text</Text>
          <Text style={styles.statusTextWater} category="p1">some text</Text>
          <Text style={styles.statusTextWR} category="p1">You have gone to the washroom {numTimesDay} times today with each trip being an average of {avgTime} seconds long.</Text>
        <Divider></Divider>
        </View>
        <View style={styles.timerContainer}>
           <Timer setTimerStateChanged={setTimerStateChanged} />
        </View>
        <View style={styles.waterContainer}>
          <Divider></Divider>
          <WaterIntake />
        </View>
      </View>
    </WaterIntakeContext.Provider>
  );
};

const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "column",
      justifyContent: "flex-start",
      flexWrap: 'wrap',
      backgroundColor: "#fff",
      paddingRight: 30,
      paddingLeft: 30,
      paddingTop: 20
    },
    statusContainer: {
      borderLeftWidth: 1,
      borderRightWidth: 1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      flex: 1
    },
    waterContainer: {
      borderLeftWidth: 1,
      borderRightWidth: 1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      flex: 1,
      width: "100%",
    },
    timerContainer: {
      borderLeftWidth: 1,
      borderRightWidth: 1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      flex: 2,
      paddingBottom: 10,
    },
    titleText: {
      paddingBottom: 5
    },
    subtitleText: {
      paddingBottom: 20
    },
    statusTextWater: {
      paddingBottom: 10
    },
    statusTextWR: {
      paddingBottom: 20
    }
  });

最后在 WaterIntake.jsx 中：

  return (
    <View style={styles.container}>
      <Text category="h6" style={{paddingTop: 20, paddingBottom: 15}}>Water log</Text>
      
      <View style={styles.buttonView}>
        <Button style={styles.button} onPress={async () => {
          await recordWaterIntake(0.25)
        }} >1/4 Cup</Button> 
        <Button style={styles.button} onPress={async () => {
          await recordWaterIntake(0.5)
        }}> 1/2 Cup </Button>
        <Button style={styles.button} onPress={async () => {
          await recordWaterIntake(0.75)
        }}> 3/4 Cup </Button>
        <Button style={styles.button} onPress={async () => {
          await recordWaterIntake(1)
        }}> 1 Cup </Button>
      </View>
      <View style={styles.containerText}>
        <Text>Total water consumed: {dayTotalWater}</Text>

        <Button onPress={resetWaterDb}>Reset table</Button>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    justifyContent: "space-between"
  },
  buttonView: {
    flex: 1,
    flexDirection: "row",
    width: "100%",
    resizeMode: 'contain',
  },
  containerText: {
    flex: 2,
    flexDirection: 'column'
  },
  button: {
    margin: 2,
    // width:"22%",
    
  }
});

Answer 1

1. 在 flex: wrap 中包装 buttonView div

    buttonView: {
    flex: 1,
    flexDirection: "row",
    width: "100%",
    resizeMode: 'contain',
    flexWrap: 'wrap'
  },

1. 您可以将其设为可滚动：

  buttonView: {
    flex: 1,
    flexDirection: "row",
    width: "100%",
    resizeMode: 'contain',
    overflow: 'auto'
  },

截图：