我撰寫了以下代碼，但我在“titleContainer”下的 flex 不起作用。
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 0.5,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
請查看螢屏截圖。綠色背景應覆寫螢屏的一半。
uj5u.com熱心網友回復：
RN 中的Flex只取整數值
如果您希望 titleContainer 使用 flex 占據容器大小的 50%，這就是您可以實作的方法。
您需要另一個視圖與 titleContainer 具有相同的 flex 值，因此 titleContainer 和該轉儲視圖將分別占用父視圖的 50% 大小
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
<View style={{flex: 1}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 1,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
uj5u.com熱心網友回復：
要在子標簽上使用 flex 屬性，您的父標簽需要有一個display: "flex"屬性。
container: {
display: 'flex',
flexDirection: 'column',
flex: 1,
backgroundColor: '#43840',
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/316885.html