相关疑难解决方法(0)

我正在React Native中创建一个表单,并希望使我TextInput的屏幕宽度达到80%.

使用HTML和普通的CSS,这很简单:

input {
    display: block;
    width: 80%;
    margin: auto;
}

除了React Native不支持display属性,百分比宽度或自动边距.

那我该怎么做呢？在React Native的问题跟踪器中有一些关于这个问题的讨论,但是提议的解决方案看起来像讨厌的黑客.

设置flex: 1;和设置之间有什么区别flex-grow: 1;？当我在我的代码中设置前者时,我显示的两列具有相同的宽度,而当我设置后者时它们不会这样做.

这很奇怪,因为我认为设置flex: 1;只影响flex-grow属性.

所以对于上面的图像，我试图让“绿色”框环绕动态文本。注意蓝色和黄色文本框是如何flex: 'row'配置的，蓝色文本框在 a 处，黄色文本框flex: 2是flex: 1。

一切正常，直到文本对于父容器来说太大。

我希望绿色容器根据需要生长以适应弯曲的内在孩子。这可能与本机反应吗？

这是它在网络意义上的样子的图像：

我试过将绿色框设置为有一个，flex: 1但它太大了，因为它填满了整个屏幕。设置height是可能的，但我不知道最大内部组件的大小（至少没有一些hacky）。我什至试过minHeight。

有没有人尝试过这样的事情？我是否需要自己动态获取内部元素的高度？

更新 - 这是一些代码：

  <View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}>
    <View
      style={{
        minHeight: 40,
        borderWidth: 1,
        borderStyle: 'solid',
        padding: 5,
        margin: 5,
        backgroundColor: '#58c09e'
      }}
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 2, backgroundColor: '#eeff96' }}>
          <Text>
            Hello this is a long bit of text that will fill …

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

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

在如何渲染它方面，我在这里肯定做错了，这是代码（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> …