代码之家 › 专栏 › 技术社区 › Celso Cruz

react native:创建组件,如</组>

parent-child components tabs react-native

Celso Cruz · 技术社区 · 8 年前

我是一个老的C++开发人员,现在开始使用react native和javascript。

我想创建一个类似TableLayout(Android)的东西,但要在react native中工作。

我的想法是使用2个组件:1个家长(控制)和多个孩子(使用一个孩子类)。

<Parent>
  <Child />
  <Child />
  ...
</Parent>

父级需要确定有多少子级,在顶部或底部显示子级列表(如tablayout),控制子级活动并调用活动子级渲染。

我看到了使用React(使用this.props.children())的相同内容,但我尝试了React-native,但不起作用。

请,任何人都可以帮助我(或指出我在哪里可以找到帮助或样品)?

2 回复 | 直到 8 年前

bennygenel 8 年前

在react native中,您可以使用 this.props.children 就像你在react中做的那样。从你的问题中,我可以理解你使用它是因为它是一个函数,但它不是。下面是如何使用它的简单示例。( Working snack )

有关更多详细信息,请查看 this article 从…起 Max Stoiber 。

因为我们使用JavaScript,所以我们可以更改子项。我们可以向其发送特殊属性,决定是否要渲染或而不是按照我们的意愿操纵它们。

const ParentComponent = (props) => {
  return (<View style={props.style || {}}>{props.children}</View>)
};

const ChildComponent = (props) => {
  return (<Text style={props.style || {}}>{props.name}</Text>)
}

export default class App extends Component {
  render() {
    return (
      <ParentComponent style={styles.container}>
        {
          [0,1,2,3,4,5].map((item) => (<ChildComponent style={styles.paragraph} name={`Child Component ${item + 1}`} />))
        }
      </ParentComponent>
    );
  }
}

尽管创建一个具有挑战性的组件是一个很好的实践和练习,但没有必要为项目再次发明轮子。除非您有当前良好维护库无法解决的特殊要求,否则您不必自己解决。有很多很好的导航和选项卡视图库。你可以在 awesome-react-native

Oleksandr Leskiv 8 年前

考虑使用 react-navigation

您可以在顶部添加一个标题,并将按钮均匀分布在那里,然后在其下方添加一个扩展StackNavigator的组件(不要忘记在屏幕中禁用标题)。

这还可以在屏幕上使用淡入/滚动动画。对于主标题,可以添加一些 Animated 或 Interactable 行以突出显示活动屏幕。