render的JSX中嵌入逻辑代码的方式

最新推荐文章于 2024-06-04 10:21:50 发布

openglnewbee

最新推荐文章于 2024-06-04 10:21:50 发布

阅读量1.1k

点赞数

分类专栏： react native学习前端技术/hybrid

本文链接：https://blog.csdn.net/openglnewbee/article/details/79025497

版权

前端技术/hybrid 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

react native学习

45 篇文章 1 订阅

订阅专栏

JSX中通过大括号即可嵌入js; 这里我们通过一个箭头函数和map返回了一个Text的数组，这样我们就通过代码动态生成了N个text的jsx组件对象了。

 
  < 
  View 
  > 
 
 
  { 
  messages. 
  map(( 
  item, 
  index) 
  => 
  < 
  Text 
  key= 
  { 
  index 
  } 
  style= 
  { 
  styles. 
  listText 
  } 
  > 
  { 
  item 
  } 
  </ 
  Text 
  >) 
  } 
 
 
  < 
  View 
  style= 
  {{ 
  marginTop: 
  300 } 
  } 
  > 
 
 
  < 
  Button 
 
 
  title= 
  {this. 
  props. 
  content 
  } 
 
 
  onPress= 
  {() 
  => 
 
 
  this. 
  props. 
  navigation. 
  navigate( 
  'Profile', { 
  name: 
  this. 
  props. 
  jumpTitle, 
  info: 
  messages }) 
 
 
  } 
 
 
  /> 
 
 
  </ 
  View 
  > 
 
 
  </ 
  View 
  > 
 