ios - react 原生 View 上的选择器放置错误
<p><p>我正在关注 <a href="https://www.udemy.com/the-complete-react-native-and-redux-course/learn/v4/overview" rel="noreferrer noopener nofollow">Udemy react-native course</a>在其中一个示例中，他使用选择器来选择屏幕中的数据。当他尝试它时，它似乎正在工作，但现在当我尝试渲染它时，我得到了一个奇怪的结果。</p>
<p>如果我完全按照他的代码，选择器显示在所有其他项目之后，在进行一些更改后，我让它显示在正确的位置，但现在它被压扁了，这仍然不正确:</p>
<p> <a href="/image/TAnGg.png" rel="noreferrer noopener nofollow"><img src="/image/TAnGg.png" alt="bad pickler"/></a> </p>
<p>在如何渲染它方面我肯定做错了，这里是代码(<a href="https://github.com/mauricio/manager/blob/master/src/components/EmployeeCreate.js" rel="noreferrer noopener nofollow">full example on github</a>):</p>
<pre><code>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);
</code></pre>
<p>知道我可以做些什么来正确渲染它吗？</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您需要从代码的这一行中删除 <code>style={{flex: 1}}</code>:</p>
<pre><code><CardSection style={{flex: 1}}>
</code></pre>
<p>原因是您的父容器 <code>Card</code> 没有定义任何 <code>flex</code> 或 <code>width/height</code> 值。如果 <code>flex</code> 未定义，<a href="https://stackoverflow.com/questions/43143258/flex-vs-flexgrow-vs-flexshrink-vs-flexbasis-in-react-native" rel="noreferrer noopener nofollow">the default is <code>flex: 0</code></a> .如果您查看 <a href="https://facebook.github.io/react-native/docs/layout-props.html#flex" rel="noreferrer noopener nofollow"><code>flex</code></a> 的文档，你会看到:</p>
<blockquote>
<p>When <code>flex</code> is 0, the component is sized according to <code>width</code> and <code>height</code> and it is inflexible.</p>
</blockquote>
<p>将其与未定义 <code>width/height</code> 相结合，您会在呈现 <code>CardSection</code>s 时获得此行为:</p>
<ul>
<li>三个<code>CardSection</code>(输入、输入、按钮)将根据其子级占用默认的<code>width</code>和<code>height</code>。这是 <code>Input</code> 和 <code>Button</code> 的默认样式。</li>
<li>带有 <code>style={{flex: 1}}</code> 的 <code>CardSection</code> 将根据 <code>width</code> 和 <code>height</code>根据 <code>flex: 1</code>:</li> 的定义，父容器占用的剩余空间
</ul>
<blockquote>
<p>When <code>flex</code> is a positive number, it makes the component flexible and it will be sized proportional to its <code>flex</code> value. So a component with <code>flex</code> set to 2 will take twice the space as a component with <code>flex</code> set to 1.</p>
</blockquote>
<ul>
<li>在这种情况下，父容器 <code>Card</code> 没有多余的空间。所以发生的情况是这个 <code>CardSection</code> 以 0 <code>height</code> 结束。因此，您会看到奇怪的溢出渲染。</li>
</ul>
<p>一旦你删除 <code>style={{flex: 1}}</code>，<code>CardSection</code> 的 <code>width</code> 和 <code>height</code> > 将由它的子组件定义，例如 <code>Input</code> 和 <code>Button</code>，确实有样式和默认样式。</p>
<p>根据 <a href="https://yogalayout.com" rel="noreferrer noopener nofollow">Yoga</a> 这是否是正确的行为规范(Yoga 是 React Native 用于布局的)适用于 <a href="https://github.com/facebook/yoga/issues/701" rel="noreferrer noopener nofollow">debate</a>并且有 <a href="https://github.com/facebook/react-native/issues/3929" rel="noreferrer noopener nofollow">tripped up</a>别人之前。一定要看看 <a href="https://stackoverflow.com/questions/43143258/flex-vs-flexgrow-vs-flexshrink-vs-flexbasis-in-react-native" rel="noreferrer noopener nofollow">first StackOverflow answer</a>我链接到，因为它比任何关于 React Native wrt <code>flex</code> 的文档都更详细和解释了陷阱。</p></p>
<p style="font-size: 20px;">关于ios -react 原生 View 上的选择器放置错误，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/49164441/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/49164441/
</a>
</p>
页:
[1]