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

Posted 2023-02-23

【中文标题】react-native：创建像 <group> <item /> <Item /> .. </group> 这样的组件

【英文标题】：react-native: Creating components like <group> <item /> <Item /> .. </group>

【发布时间】：2018-09-04 00:59:31

【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

github.com/paraswatts/DrawerNavigatorReactNative。使用我使用抽屉、堆栈和选项卡导航器制作的这个示例项目

【参考方案1】：

考虑使用react-navigation

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

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

【讨论】：

我也在尝试学习 react-native。而且，我认为，理解一些问题是一个很好的挑战......

【参考方案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找到其中的大部分

【讨论】：

我部分同意。我还没有找到完全符合我要求的组件。我想要一个组件，它允许我创建一个可以显示在顶部或底部的 TabLayout，并且可以在不影响现有组件的情况下使用。此选项卡将显示 3 个列表：学生、班级和考试（可通过选项卡选择）。 Tab 元素的数量可能比这个大，如果可以的话，我希望能够放置一个分页（或滚动）。我希望能够放置图标而不是文本（特别是如果它在下面）。也就是说，我有几个想法，我会用这个来学习。

在 ios 中工作正常，但在 Android 中我收到一条消息：“无法添加没有瑜伽节点的孩子...”

如何只处理我定义为子级的标签？更好的是，我怎么知道孩子的标签是什么？

@CelsoCruz 您可以检查孩子的显示名称，如this answer中所示

我看到了 Max Stoiber 的文章（我非常喜欢），但在我的测试中使用 react-native 时不起作用……也许在 React for Web 中起作用……