React-native 循环 return

Question

我试图让一个正常的循环只渲染一些视图，但它只进行了 1 次，基本上它渲染了几个小时，然后我检查其他函数是否小时与我的阵列上的小时相同，并且如果是我 return 约会时间的标题。

这是我从 react-native-calendars 开始使用的函数，我不认为我可以做它真正不同的，因为我需要 return 函数上的 <View>。

renderItem(item) {
  var cont = 0;
  for (i = 0; i <= 23; i++) { 
    return (
      <View style={[s.item, {height: item.height}]}>
        <View>
          <View style={{flexDirection: 'row',alignItems:'center'}}>
            <Text>{item.name}{i}:00  </Text>
            <View style={{borderBottomWidth: 1,flex:1,}}></View>
          </View>
          <TouchableOpacity style={{flexDirection: 'row',marginLeft: 35,borderColor: 'green',borderLeftWidth: 1,height: 50,backgroundColor:'#99ff99',opacity: 0.2}}>
            <Text style={{marginLeft: 10,color:'white',opacity: 1}}>{this._checkHour(i)}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );       
  }
}

_checkHour(i){

 for (var k in GLOBAL.agenda){
   console.log(i);
   var horaDaLista = (GLOBAL.agenda[k] ? (GLOBAL.agenda[k].horaini ? GLOBAL.agenda[k].horaini.Hours : "") : ""   ) ;

   if(i==horaDaLista) {
     console.log(GLOBAL.agenda[k].titulo);
     return GLOBAL.agenda[k].titulo; 
   }
 }

}

Answer 1

不完全确定具有这种外观的东西是否可行：

renderItem(item) {
  var cont = 0;
  var output=[];
  for (i = 0; i <= 23; i++) {
    var getHours =this._checkHour(i);
    var tempItem=  (
        <View key={i}>
          <View style={{flexDirection: 'row',alignItems:'center'}}>
            <Text>{i}:00  </Text>
            <View style={{borderBottomWidth: 1,flex:1,}}></View>
          </View>
          <TouchableOpacity style={{flexDirection: 'row',marginLeft: 35,borderColor: 'green',borderLeftWidth: 1,height: 50,backgroundColor:'#99ff99 ',}}>
            <Text style={{marginLeft: 10,color:'white',opacity: 1}}>{getHours}</Text>
          </TouchableOpacity>
        </View>
   );
    output[i] = (tempItem);

 }

 return(
    <View style={[s.item, {height: item.height}]}>
      {output}
    </View>
  );
}

它不起作用的原因是因为当循环执行一次时，它 returns （函数值）因此它在循环之前就退出了。对我所做的解释是，我不断添加到视图数组中，并将它们全部附加到单个记录的末尾。我还冒昧地从循环中删除了第一个视图标签，并在最后手动添加了它，因为它似乎不是重复该行的重点。如果是，请将它添加到 tempItem 的顶部，并记住将键分配给该元素而不是当前元素。

React-native 循环 return

React-native loop for return

javascript

arrays

react-native

react-native-android

react-native-ios