中心反应原生视图

Question

我正在创建一个组件来显示国旗和国家名称。我会喜欢以可用空间为中心的视图（图像+文本）。 所以如果parent的宽度是整个屏幕，那么左边会有空间，右边也会有空间。如果父级仅占屏幕的 50%，则两侧将留有空间...

我所做的：

      <View style={styles.mainContainer} >
          <View >
            <TouchableOpacity
              disabled={this.props.disablePicker}
              onPress={() => this.setState({ modalVisible: true, dataSource: this.props.dataSource })}
              activeOpacity={0.7}
            >
              <View>
          <View style={[pickerStyle,{ flexDirection:'row'}]} >
            <Image style={{}} source={selectedLabel.image} />
            <Text style={}>{selectedLabel.name}</Text>
            {dropDownImage ? <Image
              style={dropDownImageStyle}
              resizeMode="contain"
              source={dropDownImage}
            /> : null}
          </View>
              </View>
            </TouchableOpacity>
          </View>
    </View>


const CountryPickerStyles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  itemSeparatorStyle:{
    height: 1,
    width: "90%",
    alignSelf: "center",
    backgroundColor: "#D3D3D3"
  },
  searchBarContainerStyle: {
    marginBottom: 10,
    flexDirection: "row",
    height: 40,
    shadowOpacity: 1.0,
    shadowRadius: 5,
    shadowOffset: {
      width: 1,
      height: 1
    },
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 10,
    elevation: 3,
    marginLeft: 10,
    marginRight: 10
  },

  selectLabelTextStyle: {
    color: "#000",
    fontSize:16,
    flexDirection: "row",
    marginLeft: 100,
    marginRight: 100
  },
  placeHolderTextStyle: {
    color: "#757575",
    padding: 10,
    textAlign: "left",
    width: "99%",
    fontStyle: 'italic', 
    fontSize:12,
    flexDirection: "row"
  },
  dropDownImageStyle: {
    marginLeft: 10,
    color: "#757575",
    width: 10,
    height: 10,
    alignSelf: "center"
  },
  listTextViewStyle: {
    color: "#000",
    alignItems: "center",
    justifyContent: "center",
    marginLeft: 20,
    marginHorizontal: 10,
    textAlign: "left"
  },
  pickerStyle: {
    elevation:0,
    paddingRight: 10,
    paddingLeft: 10,
    marginRight: 10,
    marginLeft: 10,
    width:"90%",
    borderWidth:0   ,
    flexDirection: "row"
  }
});

这是我得到的： https://pasteboard.co/JG5Rx9P.png 还有https://pasteboard.co/JG5Tthie.png