如何在react-native中绘制此自定义布局

Question

我是React-native的新手，我必须绘制这个精确的图像。我知道如何在Android中绘制它而不是在本机中绘制它。

我研究过官方文档here，但无法对此特定视图有清晰的认识。

任何帮助将不胜感激。

提前致谢。

Answer 1

我没有给出确切的答案，但我可以给你指路。

<View //screen view>
 <View //this view is for the inputs>
  <InputText  //input text from react native 
   has some properties, like placeholder, styles and onChange function>
  <InputText> 
  <InputTextWithCounter  //I suggest you create a component that
   returns a view with a inputText and this counter,
   that can be made with react-native buttons or some other library>
  <InputText>
 <View>
 <View  //View used for the confirm button or other parts of the screen>
  <Button  //Buttons are generally made from a text with touchable opacity>
  </Button>
 </View>
</View>

忘记提及

也可以在视图上创建标题，但通常，标题是您正在使用的本机库的一部分，如果它是re​​act-native-navigation，您可以在此处查看：https://reactnavigation.org/docs/header-buttons.html