我目前有一个简单的图例组件,其产生的输出如下:
问题是我手动将蓝色矩形的height
设置为与文本一样高。我有什么办法可以使View根据文本的高度自然扩展,而不必手动将数字设置为height
?
您可以尝试Snack或查看代码:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.legend}>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Food</Text>
<Text>25%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={styles.item}>
<View style={styles.shape} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
marginHorizontal: 50,
},
legend: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between'
},
item: {
flexDirection: 'row',
alignItems: 'center'
},
shape: {
backgroundColor: 'blue',
width: 15,
height: 30, // I DONT WANT TO HAVE TO DO THIS
marginRight: 5
}
});
export default App;
任何帮助将不胜感激,谢谢!
答案 0 :(得分:0)
答案 1 :(得分:0)
如果我的理解正确,那么首先您应该为每个项目包装一个视图,然后再使用flexGrow添加第二个视图。
<View>
<View style={{flexGrow: 1}}/>
<View style={styles.item}>
第一个视图可帮助您将flexDirection更改为列,第二个视图具有flexGrow可以帮助您下推蓝色形状。并且您应该将形状高度设置为100%。
shape: {
backgroundColor: 'blue',
width: 15,
height: "100%", //here
marginRight: 5,
}
我还编辑了您的零食代码并保存。链接:https://snack.expo.io/HkZ3a5q-V
答案 2 :(得分:0)
实现这一目标的完整示例。
<View style={{flexDirection:'row'}}>
<View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
<View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
<View>
<Text>Food</Text>
<Text>25%</Text>
<Text>25%</Text>
<Text>25%</Text>
</View>
</View>
<View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
<View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
<View>
<Text>Utilities</Text>
<Text>35%</Text>
</View>
</View>
<View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
<View style={{width: 10, backgroundColor:'blue', height:'100%'}} />
<View>
<Text>Misc.</Text>
<Text>40%</Text>
</View>
</View>
</View>