我正在使用这里的react-native-elements列表:https://react-native-training.github.io/react-native-elements/API/lists/
当我使用 flex: 1
渲染它时,它非常窄。当我用 width: 400
渲染它时,就可以了。
以下是样式:
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
},
half: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
borderWidth: 2,
borderColor: '#FF0000'
},
这是列表代码:
<View style={styles.container}>
{ babyList.length === 0 ? null :
<View style={styles.half}>
<List containerStyle={{flex: 1}}>
<Text style={styles.welcome}>
Select Baby
</Text>
{babyList.map((baby, id) => {
return <ListItem key={"bbbtn" + id}
onPress={ (event) => selectBaby(baby) } title={"Baby: " + baby.name}/>
})}
</List>
</View>
}
</View>
上面的代码看起来是这样的:
这是如果我设置 containerStyle={{width: 400}}
我认为 flex: 1 会使其成为最大宽度?我需要做什么才能让它占据整个父容器?
最佳答案
发生这种情况是因为您用 alignItems: 'center'
覆盖了默认的 alignItems: 'stretch'
。将其从样式表中删除,所有元素将被拉伸(stretch)以填充所有可用空间。
这是您在 Snack 上的代码:https://snack.expo.io/r121RGj1G
关于reactjs - React Native 元素列表宽度太窄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47330650/