• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ios - react 原生 View 上的选择器放置错误

[复制链接]
菜鸟教程小白 发表于 2022-12-13 15:55:20 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

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

bad pickler

在如何渲染它方面我肯定做错了,这里是代码(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) => <icker.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="hone"
            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>
            <icker
              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);

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



Best Answer-推荐答案


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

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

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

When flex is 0, the component is sized according to width and height and it is inflexible.

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

  • 三个CardSection(输入、输入、按钮)将根据其子级占用默认的widthheight。这是 InputButton 的默认样式。
  • 带有 style={{flex: 1}}CardSection 将根据 widthheight根据 flex: 1:
  • 的定义,父容器占用的剩余空间

When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1.

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

一旦你删除 style={{flex: 1}}CardSectionwidthheight > 将由它的子组件定义,例如 InputButton,确实有样式和默认样式。

根据 Yoga 这是否是正确的行为规范(Yoga 是 React Native 用于布局的)适用于 debate并且有 tripped up别人之前。一定要看看 first StackOverflow answer我链接到,因为它比任何关于 React Native wrt flex 的文档都更详细和解释了陷阱。

关于ios - react 原生 View 上的选择器放置错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49164441/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap