反应原生视图上的选择器放置错误

Question

我正在关注此Udemy react-native course，在其中一个示例中，他使用选择器选择屏幕中的数据。当他尝试它时，它似乎正在工作，但现在当我尝试渲染它时，我得到了一个奇怪的结果。

如果我完全按照他的代码，选择器显示在所有其他项目之后，在进行一些更改后，我让它显示在正确的位置，但现在它被压扁了，这仍然不正确：

在如何渲染它方面我肯定做错了，这里是代码 (full example on github)：

import React from 'react';
import {Picker, Text, StyleSheet, View} from 'react-native';
import {connect} from 'react-redux';
import {Card, CardSection, Input, Button} from "./common";
import {employeeUpdate} from "../actions";

class EmployeeCreate extends React.Component {

  updateEmployee(name, value) {
    this.props.employeeUpdate({prop: name, value: value})
  }

  renderPickerItems() {
    return ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
      .map((item) => <Picker.Item key={item} label={item} value={item}/>);
  }

  render() {
    return (
      <Card>

        <CardSection>
          <Input
            label="Name"
            placeholder="Your Name"
            value={this.props.name}
            onChangeText={this.updateEmployee.bind(this, 'name')}
          />
        </CardSection>

        <CardSection>
          <Input
            label="Phone"
            placeholder="555-555-5555"
            keyboardType="phone-pad"
            value={this.props.phone}
            onChangeText={this.updateEmployee.bind(this, 'phone')}
          />
        </CardSection>

        <CardSection style={{flex: 1}}>
          <View style={styles.shiftContainerStyle}>
            <Text style={styles.pickerTextStyle}>Shift</Text>
            <Picker
              style={styles.pickerStyle}
              selectedValue={this.props.shift}
              onValueChange={this.updateEmployee.bind(this, 'shift')}
            >
              {this.renderPickerItems()}
            </Picker>
          </View>
        </CardSection>

        <CardSection>
          <Button>
            Create
          </Button>
        </CardSection>

      </Card>
    );
  }

}

const styles = StyleSheet.create({
  pickerTextStyle: {
    fontSize: 18,
    lineHeight: 23,
    flex: 1,
  },
  pickerStyle: {
    flex: 2,
  },
  shiftContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  }
});

const mapStateToProps = state => {
  const {name, phone, shift} = state.employeeForm;

  return {
    name,
    phone,
    shift,
  };
};

export default connect(mapStateToProps, {employeeUpdate})(EmployeeCreate);

知道我可以做些什么来正确渲染它吗？

Answer 1

您需要从代码的这一行中删除style={{flex: 1}}：

<CardSection style={{flex: 1}}>

原因是您的父容器Card 没有定义任何flex 或width/height 值。如果 flex 未定义，the default is flex: 0。如果您查看flex 的文档，您会看到：

当flex为0时，组件大小按照width和height，不灵活。

将其与未定义 width/height 相结合，您会在呈现 CardSections 时获得此行为：

• 三个CardSections（输入、输入、按钮）将根据他们的孩子使用默认的width和height。这是Inputs 和Button 的默认样式。
• CardSection 和style={{flex: 1}} 将根据flex: 1 的定义根据父容器占用的剩余空间计算其width 和height：

当flex 为正数时，它使组件具有灵活性，并且其大小将与其flex 值成比例。因此，flex 设置为 2 的组件将占用两倍于 flex 设置为 1 的组件的空间。

• 在这种情况下，父容器Card 没有剩余空间。所以发生的事情是这个CardSection 以0 height 结束。因此，您会看到奇怪的溢出渲染。

一旦删除style={{flex: 1}}，CardSection 的width 和height 将由它的子组件定义，例如Input 和Button，确实有样式和默认样式。

根据Yoga 规范（瑜伽是 React Native 用于布局的）这是否是正确的行为取决于debate 并且之前有tripped up 其他人。一定要查看我链接到的 first StackOverflow answer，因为它比 React Native wrt flex 上的任何文档都有更多的细节和解释。