反应本机元素位置？

Question

如何定位此元素？

这是我的代码：

return (
<View style={rootViewStyle}>
  <View style={lineStyle} />
  <View style={faceContainerStyle}>
    <View style={faceStyle} />
    <View style={faceStyle} />
    <View style={faceStyle} />
    <View style={faceStyle} />
  </View>

</View>

StyleSheet：

const styles = StyleSheet.create({
  rootViewStyle: {
    flex: 1,
    justifyContent: 'center',
    alignSelf: 'stretch',
  },
  faceContainerStyle: {
    justifyContent: 'space-around',
    flexDirection: 'row',
  },
  faceStyle: {
    height: 50,
    width: 50,
    borderRadius: 25,
    backgroundColor: '#ffc700',
  },
  lineStyle: {
    borderBottomWidth: 2,
    borderBottomColor: '#c0c0c0',
  },
});

Answer 1

如下向position添加2个属性（top和lineStyle）

lineStyle: {
  position: 'relative',
  top: 26,
  borderBottomWidth: 2,
  borderBottomColor: '#c0c0c0',
},

希望这会有所帮助！