justifyContent在我的卡中无法正常工作

时间:2018-10-06 08:41:21

标签: reactjs react-native flexbox jsx

我希望我的内容位于顶部和底部的中心..等距内,所以我正在使用justifyContent ='center'但什么都没发生

              <View style={styles.allAttendeesContainer}>
              <Image
              style={styles.imageSpeaker}
              source={{
                uri: item.image
              }}/>
              <View>
              <Text style={[styles.textSpeakerDetail,{fontWeight:'bold',color:'#000'}]}>Muthu Ramalingam</Text>
              <Text style={styles.textSpeakerDetail}>HelloLead,DexPatent</Text>
              <Text style={styles.textSpeakerDetail}>Information Technology and Services</Text>
              </View>
              </View>

这是我的jsx 下面是我的风格

 allAttendeesContainer:{
 height:125,
 flexDirection:'row',
 borderBottomWidth:0.5,
 flex:1,
 justifyContent:'center'
 },
 textSpeakerDetail:{
  fontSize:18,
  },
  imageSpeaker:{ 
  width: 75,
  marginHorizontal:'3%',
  height: 75, 
  borderRadius: 50,
  },
  inviteBox:{
  marginLeft:'10%',
  height:30,
  width:80,
  borderColor:'green',
  borderRadius:50,
  borderWidth:1,
  justifyContent:'center'}

1 个答案:

答案 0 :(得分:1)

您没有使用过

  

alignItems:'中心'

像这样

allAttendeesContainer: {
height: 125,
flexDirection: 'row',
borderBottomWidth: 0.5,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},