css - Flexbox 不将自身限制为父宽度并且总是溢出
问题描述
我很难理解为什么 flexbox 不会将自己限制在父组件的宽度上。我尝试了多种方法,但运气不佳,我的按钮总是溢出父组件。
这是我到目前为止所拥有的:https ://snack.expo.io/@mohammedri/smart-bagel
这就是我想要的(前 4 个红色框是按钮,下一个红色框是文本字段,最后一个是重置表按钮):
我正在使用 UI 小猫进行主题化,但不认为它会影响结果。我也试过resizeMode
了,但它似乎不起作用。任何帮助表示赞赏。
我在下面发布了我的大部分代码:
应用程序.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%",
}
});
解决方案
推荐阅读
- azure - 发布管道问题:Powershell 脚本未在指定的工作目录中运行
- reactjs - 用反应上下文填充状态 nextjs
- python - 将txt文件导入Python中的多行字符串时如何保持txt文件格式
- php - 显示右表中的最新记录,如果记录不可用,则至少显示左表中的记录
- html - HTML - 容器与其兄弟位于同一行
- swift - Swift 中通知的自定义长度振动
- spring - Spring批处理AbstractJob遇到致命错误-无法序列化执行上下文
- html - 如何对 HTML 表格进行排序?
- javascript - 使用抽屉和底部选项卡在嵌套导航中打开抽屉时出错
- c# - 运行循环时出现不一致的异常