如何 return 循环按钮 5 次然后在下一行 return ？

Question

我从 native-base 创建了一个 <CardItem /> 并设置了 <Button /> 的样式。我 return 来自 releasedTime.map() 函数。

如果我的releasedTime长度<6，效率就是我想要的。

这里是 releasedTIme 长度 = 5

这里是 eleasedTIme 长度 = 2 如果releasedTime是一个巨大的数组，变成这样就很可怕了所以我想要它当 map 函数循环 5 次时，它可以在下一行 returned。

我不知道该怎么做。我认为 {} 只能 return 一次。

如果写多个 {} 我怎么知道 releasedTime 循环多少次然后使用多个 {} ?

如有任何帮助，我们将不胜感激。提前致谢。

这是我的文件使用 <CardItem />

<CardItem>
       <Body>             
         <Image source={{uri: photoHref }} style={{height: 200, width: '100%', resizeMode: 'stretch', flex: 1}}/>               
         <Body style={{ flex: 1, flexDirection: 'row', alignSelf: 'flex-start', paddingTop: 5, flexWrap: 'wrap', width: '100%' }}>
            {releasedTime.map(value => {                      
              return (
                <Button key={value}>{`${hour}:${minute}`}</Button>
              );
            })}
         </Body>
       </Body>
</CardItem>

我的 <Button /> 来自：

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#007aff',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
};

export { Button };

我试着计算索引，还是不行:(

<CardItem>
              <Body>             
                <Image source={{uri: photoHref }} style={{height: 200, width: '100%', resizeMode: 'stretch', flex: 1}}/>               
                  <Body style={{ flex: 1, justifyContent: 'flex-start',flexDirection: 'row', paddingTop: 5, flexWrap: 'wrap', width: '100%' }}>
                    {releasedTime.map((value, index) => {
                        if( index / 5 <= 1) {
                          return (
                            <Button key={index}>{`${hour}:${minute}`}</Button>
                          );
                        } else {
                          return (
                            <Body style={{ flex: 1, justifyContent: 'flex-start',flexDirection: 'row', paddingTop: 5, flexWrap: 'wrap', width: '100%' }}>
                              <Button key={index}>{`${hour}:${minute}`}</Button>
                            </Body>
                          );
                        }

                    })}
                  </Body>
              </Body>
            </CardItem>

Answer 1

您可以使用 map 函数的索引来确定数组中是否有 5 个或更多元素，并在新行中插入换行符或设置不同样式的按钮。

我不在 IDE 的 PC 上，但像这样的东西应该会为您指明正确的方向：

        {releasedTime.map((value, index) => {  
          if (index > 5) return <ButtonOnNewLine>...</ButtonOnNewLine>
          return (
            <Button>...</Button>
          );
        })}

您还可以使用模数对与索引相关的按钮进行样式设置。

或者像在这个 codepen 中那样使用纯 css： https://codepen.io/SakerONE/pen/bdbLNz

你明白了吗？

如何 return 循环按钮 5 次然后在下一行 return ？

How to return loop the button 5 times and then return in next row?

react-native

native-base