动态水平内容视图

Question

我是React的全新人，我想查看一下，如果我的想法可行。

我想创建一个包含以下布局的网站：

绿色侧是可折叠导航。在示例屏幕上，显示导航。如果用户想要隐藏导航，那么这些将被切换（如引导导航），宽度更小。

内容将被拉伸到完整宽度的其余部分。

如果单击链接（取决于哪个链接），将在内容的左侧或右侧插入新视图（请参阅exmaples）。 “子视图”的最大值为3。

这些布局是否可行？ 我想要很多想法和思考的食物！

Answer 1

是的，有可能。你想看看flexbox以及它在RN中是如何工作的，你也可以看看react-native-navigation（wix），它提供左右抽屉。

如果你想自己做，基本上你想做这样的事情（避免测试它）：

<View style={{flexDirection: "row"}}>
<View style={{flex: 0.3, backgroundColor: "green"}}/>
<View style={{flex: 0.15, backgroundColor: "brown"}}/>
<View style={{flex: 1, backgroundColor: "silver"}}/>
<View style={{flex: 0.15, backgroundColor: "black"}}/>
</View>

现在，flexDirection使子项水平对齐，然后flex基本上是视图应覆盖的变量维度。您也可以在这里使用dp或百分比。

第三个的flex为1，这意味着它将告诉RN使用尽可能多的空间来覆盖剩余的空间。

为了隐藏或显示特定视图，您可以为它们设置动画或设置样式并修改flex。

希望有所帮助