react-native：创建像 <group> <item /> <Item /> .. </group> 这样的组件

Question

我是一名老 C++ 开发人员，现在开始使用 react-native 和 javascript。

我想要创建类似于 TabLayout (Android) 的东西，但要在 react-native 中工作。

我的想法是使用 2 个组件：1 个父级（控制）和多个子级（使用一个子类）。

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

父母需要确定有多少孩子，在顶部或底部显示一个孩子列表（如tablayout），控制孩子活动并调用活动孩子渲染。

我在使用 React（使用 this.props.children()）时看到了同样的东西，但我尝试了 react-native 并且不工作。

请，任何人都可以帮助我（或指出我可以在哪里找到帮助或示例）？

Answer 1

考虑使用react-navigation

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

这也将提供在屏幕上使用淡入淡出/滚动动画的能力。 对于主标题，您可以添加一些 Animated 或 Interactable 行以突出显示活动屏幕。

Answer 2

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

更多详情，您可以从Max Stoiber查看this article。

因为我们使用的是 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>
    );
  }
}

尽管创建具有挑战性的组件是一种很好的实践和练习，但对于一个项目来说，再次发明轮子是没有必要的。除非您有当前维护良好的库无法解决的特殊要求，否则您不必自己做。有很多很好的导航和 TabView 库。你可以从awesome-react-native找到其中的大部分