react-native - 将分隔符添加到文本原生基础

Question

我看到本机基础中的列表视图有一个分隔符，就像这样

import React, { Component } from 'react';
import { Container, Content, ListItem, Text, Separator } from 'native-base';
export default class SeperatorExample extends Component {
  render() {
    return (
        <Container>
            <Content>
                <Separator bordered>
                    <Text>FORWARD</Text>
                </Separator>
                <ListItem >
                    <Text>Aaron Bennet</Text>
                </ListItem>
                <ListItem>
                    <Text>Claire Barclay</Text>
                </ListItem>
                <ListItem last>
                    <Text>Kelso Brittany</Text>
                </ListItem>
                <Separator bordered>
                    <Text>MIDFIELD</Text>
                </Separator>
                <ListItem>
                    <Text>Caroline Aaron</Text>
                </ListItem>
            </Content>
        </Container>
    );
}

}

但是我如何将分隔符添加到普通文本字段中？

render() {
  return (
    <Container>
        <Content>
            <Text>Hello</Text>
            </Separator>
            <Text>How are you?</Text>
        </Content>
    </Container>
  );
}

因为这个分隔符看起来像一个列表特定的部分

Answer 1

您可以使用自己的组件作为分​​隔符。

// separator.js
export default class extends React.component {
  render () {
    return (
      <View style={...this.props.style}>
        // If you want children
        { this.props.children }
      </View>
    )
  }
}

// Your other component
import TextSeparator from './separator';

export default class extends React.component {
  render () {
    return (
      <Container>
        <Content>
          <Text>Hello</Text>
          <TextSeparator style={{paddingVertical: 10}} />
          <Text>How are you?</Text>
        </Content>
      </Container>
    )
  }
}