Question

我是一个古老的C ++开发者，现在，从react-native和javascript开始。

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

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

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

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

我使用React看到了同样的东西（使用this.props.children（）），但我尝试使用本机反应并且不起作用。

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

Answer 1

考虑使用react-navigation

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

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

Answer 2

在react-native中，您可以使用this.props.children，就像您在做出反应一样。从你的问题，我可以理解你使用它，因为它是一个功能，但事实并非如此。下面是一个如何使用它的简单示例。（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>
    );
  }
}

虽然创造一个具有挑战性的组件是一个很好的练习和练习，但是有必要为项目再次发明轮子。除非您有特殊要求，目前没有良好的维护库可以解决，否则您不必自己动手。有很多很好的导航和TabView库。您可以在awesome-react-native

中找到大部分内容

react-native：创建<group> <item> <item> .. </item> </item> </group>等组件

2 个答案: