Question

class Application extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NewItemContainer />
        <UndoRedoContainer />
        {/*
        <UnpackedItemsContainer title="Unpacked Items" render={() => <UnpackedFilterContainer />} />
        <PackedItemsContainer title="Packed Items" render={() => <PackedFilterContainer />} />
        <MarkAllAsUnpackedContainer /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#F79D42',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }
});


export default Application;

我要做的就是将内容移动到屏幕中央（垂直）。

justifyContent: 'center'

应该在这里工作，但是不工作。我已经发布了指向该图像的链接。 https://1drv.ms/u/s!Agwl3ZPMPDkwg_V0EB-4u-njSFZaKg

Answer 1

将backgroundColor添加到您的子组件中，检查子组件是否占据了父视图的垂直高度。：D

编辑：

像这样向您的NewItemContainer组件添加背景。如果backgroundColor变成子组件的颜色，则必须调整其柔韧性或将其更改为height，width属性

schema {
query: Query
}

type Query{
userById(id: ID): User
}

type User{
userId: String
name: String
     customers: [Customer]
}

type Customer{
customerId: ID
customerName: String
}

Answer 2

尝试添加此样式

justifyContent: 'center'
alignItems: 'center',
flex: 1

React-Native justifyContent无法正常运行

2 个答案: