如何在同一行中获得2反应本机<view>？

Question

我正在尝试让图像查看器与我的画廊一起使用，我使用的https://github.com/ascoders/react-native-image-viewer库提供了在标头中呈现react元素的选项。我在标题中使用了以下元素

<View styles={modalStyles.header}>
    <View onPress={props.closeModal} style={modalStyles.leftHeader}>
        <Icon name="close" size={20} color="#fff"></Icon>
    </View>

    <View onPress={() => props.startDownload(props.getShowingImage())} style={modalStyles.rightHeader}>
        <Icon name="download" size={30} color="#fff"></Icon>
    </View>

</View>

这是我的风格

const modalStyles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    backgroundColor: "red",
  },
  leftHeader: {
    marginLeft: 20,
    padding: 10,
    alignSelf: 'flex-start',
    backgroundColor: "red",
  },
  rightHeader: {
    marginRight: 20,
    padding: 10,
    alignSelf: 'flex-end',
    backgroundColor: "red",
  },
})

这是模态的样子

Answer 1

这是我如何在左侧插入内容而在右侧插入内容的方式。您的代码中也有错字..用style

重命名styles

 <View style={[{flexDirection:'row', alignItems:'center'}]}>
    <View style={[{flex:1,flexDirection:'row'}]}>
             //... left content
    </View>
    <View style={[{justifyContent:'space-evenly', marginVertical:10}]}>
              // .... right content
    </View>
 </View>