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相结合，您在呈现CardSection时会出现此行为：

三个CardSection s（输入，输入，按钮）将根据其子项占用默认width和height。这是Input和Button。
CardSection style={{flex: 1}} width将根据{{1}的定义，根据父容器占用的剩余空间计算其height和flex: 1 }}：

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

在这种情况下，父容器Card没有剩余空间。那么会发生什么呢CardSection最终为0 height。因此你会看到奇怪的溢出渲染。

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

根据Yoga规范（瑜伽是React Native用于布局的），这是否是正确的行为是debate，并且之前有tripped up个。绝对查看我链接到的first StackOverflow answer，因为它比关于React Native wrt Input的任何文档都有更多关于陷阱的细节和解释。

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

1 个答案: