Question

我需要在React Native中构建的应用程序的Appbar上放置两个图像，但我无法使其正常工作。第一个图像必须位于Appbar的中间，而第二个图像必须位于其右侧。下图显示了它应该如何：

目前，我正在尝试这种方式：

<View style={viewStyle}>
    <Image source={require('../images/rank.jpg')} style={styles.imageStyle} />\
    <Image source={require('../images/ic_notifications.png')} style={styles.notificationStyle} />
</View>

const styles = {
  viewStyle: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#022436',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  imageStyle: {
    height: 35,
    width: 120
  },
  notificationStyle: {
    height: 24,
    width: 24,
    justifyContent: 'flex-end'
  }
};

但是这两个图像都集中在Appbar中。还试图在rank.jpg图像的同一级别创建一个视图，但没有任何改变。

解决方案（由@Travis White提供）：

<View style={viewStyle}>
    <View style={{ flex:1 }} />
    <View style={{ flex:1, flexDirection: 'row', justifyContent: 'center' }}>
      <Image source={require('../images/rank.jpg')} style={styles.imageStyle} />
    </View>
    <View style={{ flex:1, flexDirection: 'row', justifyContent: 'flex-end' }}>
      <Image source={require('../images/ic_notifications.png')} style={styles.notificationStyle} />
    </View>
  </View>

const styles = {
  viewStyle: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#022436',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  imageStyle: {
    flex: 1,
    height: 35,
    width: null
  },
  notificationStyle: {
    height: 24,
    width: 24,
    margin: 12
  }
};

我仍然怀疑包含空<View>可能会出现的性能问题。如果有人能解释的话。

Answer 1

这看起来像是要将顶部划分为3个相等的部分。为什么不使用View作为第一部分的占位符。给出所有三个组件flex: 1，你应该保持良好状态。如果图片给您一个问题，您可以简单地让它们成为flex: 1设置的视图的子项，因此viewStyle视图的所有子项都与flex：1 set平分。

Answer 2

<View style={{
                flexDirection: "row",
                justifyContent: "space-between"
              }}
            >
              <View style={{ alignItems: "center", flex: 1 }}>
                <Image
                  style={{ width: 50, height: 50 }}
                  source={{
                    uri:
                      "https://facebook.github.io/react-native/docs/assets/favicon.png"
                  }}
                />
              </View>
              <View style={{ alignItems: "center", marginRight: 10 }}>
                <Image
                  style={{ width: 50, height: 50 }}
                  source={{
                    uri:
                      "https://facebook.github.io/react-native/docs/assets/favicon.png"
                  }}
                />
              </View>
            </View>

在React Native中将一个<img/>置于中心，将一个<img/>置于右侧？

2 个答案: