javascript - react native Flatlist 网格和项目标题

coder 2025-01-15 原文

我想自定义一个屏幕:

所以我使用 FlaSTList 并检查项目是否是标题我将使用 item = window.with 设置，如果不是 width item = window.width/3。但它的错误。这是我的代码:

const { width, height } = Dimensions.get("window")
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [
                { name: "Movies", header: true },
                { name: "Interstellar", header: false },
                { name: "Dark Knight", header: false },
                { name: "Pop", header: false },
                { name: "Music", header: true },
                { name: "Adams", header: false },
                { name: "Nirvana", header: false },
                { name: "Amrit Maan", header: false },
                { name: "Oye Hoye", header: false },
                { name: "Eminem", header: false },
                { name: "Places", header: true },
                { name: "Jordan", header: false },
                { name: "Punjab", header: false },
                { name: "Ludhiana", header: false },
                { name: "Jamshedpur", header: false },
                { name: "India", header: false },
                { name: "People", header: true },
                { name: "Jazzy", header: false },
                { name: "Appie", header: false },
                { name: "Baby", header: false },
                { name: "Sunil", header: false },
                { name: "Arrow", header: false },
                { name: "Things", header: true },
                { name: "table", header: false },
                { name: "chair", header: false },
                { name: "fan", header: false },
                { name: "cup", header: false },
                { name: "cube", header: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem(item) {
        if (item.header) {
            return (
                <View style={{ width: width, height: 40, backgroundColor: 'green' }}>
                    <Text>{item.name}</Text>
                </View>
            )
        } else {
            return (
                <View style={{
                    width: width / 3,
                    height: width / 3,
                    backgroundColor: 'white',
                    borderWidth: 1,
                    borderColor: 'gray'
                }}>
                    <Text>{item.name}</Text>
                </View>
            )
        }
    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'red' }}>

                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        this.renderItem(item)
                    )}
                    keyExtractor={item => item.name}

                />
            </View>
        );
    }
}
export default App;

和我的结果我有错误:一个项目不是标题是一行，但我想连续显示 3 个项目。

当使用代码在 flaSTList 中添加数字列 = 3 时:

 <FlatList
  numColumns={3}
  data={this.state.data}
  renderItem={({ item }) => (this.renderItem(item))}
  keyExtractor={item => item.name}
/>

我有结果

如何解决连续显示 3 个项目的问题？非常感谢。

最佳答案

我想你忘了在 Flatlist Prop 中添加 numColumns = { 3 } 。 Here您会得到问题的详细解决方案。

关于javascript - react native Flatlist 网格和项目标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49642869/

有关javascript - react native Flatlist 网格和项目标题的更多相关文章

ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2
我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植
Ruby 从大范围中获取第 n 个项目 - 2
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？最佳答案一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 如何在 Ruby 字符串中插入项目符号字符？ - 2
我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？最佳答案你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195
ruby - 在 Rails 项目中测试本地版本的 gem - 2
我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时，我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意，我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR，但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好，但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb，这看起来不对或者b)升级版本，推送到Github，然后运行bundleup，这除了耗时之外显然是一场灾难，因为我不确定我所做的promise是否正
ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2
有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。最佳答案根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|
ruby - 合并 nanoc 中的项目 - 2
我一直在尝试使用nanoc用于生成静态网站。我需要组织一个复杂的排列页面，我想让我的内容保持干燥。包含或合并的概念在nanoc系统中如何运作？我已阅读文档，但似乎找不到我想要的内容。例如:我如何获取两个部分内容项并将它们合并到一个新的内容项中。在staticmatic您可以在您的页面中执行以下操作。=partial('partials/shared/navigation')类似的约定在nanoc中如何运作？最佳答案这里是nanoc的作者。在nanoc中，部分是布局。因此，您可以拥有layouts/partials/shared/

javascript - react native Flatlist 网格和项目标题

有关javascript - react native Flatlist 网格和项目标题的更多相关文章

随机推荐