Question

有一个包含多行单元格元素的元素，其目的仅仅是为底部边框设置样式（实际上缺少css：last-child in react native）。

单元格元素存在于其他位置，如果开发人员选择，可以独立于包装器使用，因此如果它们创建单元格行列表并且需要边框样式格式化，则此包装器只是一个可选的附加。

单元格元素将子元素作为道具管道并渲染它们，这样您就可以获得带有文本/左侧传递的任何单元格按钮和右侧的箭头，非常典型的iphone list。

以下主要工作（甚至最后一个子边框样式逻辑工作）除了子元素道具由于某种原因没有保留在克隆中，所以输出而不是＆＃34;一些子El文本＆＃34;然后是＆＃34;＆gt;＆＃34;，它只显示＆＃34;＆gt;＆＃34;。代码包含在下面（为了便于阅读而删除了大多数样式）

细胞元素：

class Cell extends Component {
  constructor(props) {
  super(props);
}

render() {
    styles = [styles.container];
    if(!this.props.isLastChild) {
      styles.push({borderBottomWidth: 0});
    }

    return (
      <TouchableHighlight style={{ flexDirection: 'row'}}>
        <View style={styles}>
          {this.props.subElements}
          <Text> > </Text>
        </View>
      </TouchableHighlight>
     );
   }
};

打包机：

const Wrapper = () => {

  const childCount = React.Children.count(children);
  return (<View>
     {React.Children.map(children, (c, i) => 
        React.cloneElement(c, {
          isLastChild: i === childCount - 1,
        })
      )}</View>);
}

用法：

const subEl = 
    <View>
      <Text>Blah</Text>
      <Text>La La La</Text>
    </View>

  <View>
      <Wrapper>
        <Cell subElements={subEl} />
        <Cell subElements={subEl} />
      </Wrapper>
  </View>

React.cloneElement（）in native本身不保留原始道具

0 个答案: