React native 如何返回按钮5次，然后返回下一行？_React Native_Native Base

React native 如何返回按钮5次，然后返回下一行？

react-native

React native 如何返回按钮5次，然后返回下一行？,react-native,native-base,React Native,Native Base,我从本地基创建，并设置样式。我返回fromreleasedTime.map（）函数如果我的releasedTimelength{ 返回( {${hour}:${minute}} ); })} 我的来自： import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { button

我从

本地基创建
，并设置
样式。我返回fromreleasedTime.map（）
函数
如果我的releasedTime
length<6。效率是我想要的
这是当releasedTImelength=5时

这是当eleasedTImelength=2时
如果releasedTime是一个巨大的数组，它会变得像这样可怕
所以我希望它在映射函数循环5次时，可以在下一行返回
我不知道怎么做。我认为一个{}
只能返回一次
如果写入多个{}
我如何知道releasedTime
循环多少次，然后与多个{}
一起使用
任何帮助都将不胜感激。提前谢谢
这是我的文件使用


{releasedTime.map（值=>{
返回(
{${hour}:${minute}}
);
})}

我的
来自：
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 };

从“React”导入React；
从“react native”导入{Text，TouchableOpacity}；
常量按钮=（{onPress，children}）=>{
const{buttonStyle，textStyle}=样式；
返回(
{儿童}
);
};
常量样式={
文本样式：{
对齐自我：“中心”，
颜色：“#007aff”，
尺寸：16，
重量：'600'，
paddingTop:10，
垫底：10
},
按钮样式：{
弹性：1，
自我定位：“拉伸”，
背景颜色：“#fff”，
边界半径：5，
边框宽度：1，
边框颜色：“#007aff”，
边缘左：5，
marginRight:5
}
};
导出{按钮}；

我试着计算索引，但仍然没有结果：(

{releasedTime.map（（值，索引）=>{
if（index/5您可以使用map函数的index来确定数组中是否有5个或更多元素，并在新行上插入换行符或以不同方式设置按钮的样式
我不是在一台带有IDE的PC上，但类似这样的东西应该会为您指明正确的方向：
        {releasedTime.map((value, index) => {  
          if (index > 5) return <ButtonOnNewLine>...</ButtonOnNewLine>
          return (
            <Button>...</Button>
          );
        })}

{releasedTime.map（（值，索引）=>{
如果（索引>5）返回。。。
返回(
...
);
})}

您还可以使用模对与索引相关的按钮进行样式设置
或者像使用纯css的代码笔那样：

你明白这个概念了吗？
谢谢你的回复，看起来索引
是重点。但是在我的例子中，如果索引
是20，如果索引
是10，那么同一行中也会有15个
。在同一{}
它们是在同一个
下一行如何呈现？以及如何设置相关的样式？我只是尝试删除flex
或alignSelf
但不是我想要的。很抱歉，有很多问题。你也可以在这个代码笔中自动执行css中断：如果放置两个
它们不会拉伸wid在我的情况下，我希望可以是拉伸。我发现我的风格flex:1
和alignSelf:“拉伸”，“拉伸”
已经存在。我尝试调整我的风格，添加合理的内容：“周围的空间”或“中间的空间”或“中心”它们都不起作用。我希望它可以像这样。我仍然尝试使用操作符1index/5`，我在我的问题中对其进行了更新。它仍然有效l不工作：（我尝试修改样式，如'width:'30%'，alignSelf:'stretch'，'in。虽然它不能只拉伸一个或两个，但我至少可以接受。你能将其发布到答案中吗？我会接受答案。非常感谢！使用react native Flatlist的numcolumns numcolumns道具。看到这个链接看起来可以使用。我会的。）试试看。谢谢分享@akhilxavier。
<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>

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