相关疑难解决方法(0)

FlatList似乎不起作用.我收到了这个警告.

VirtualizedList:缺少项目的键,确保在每个项目上指定键属性或提供自定义keyExtractor.

码:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

我想创建最简单的两列网格ListView

item | item
item | item

我看到这篇关于创建网格的文章,它在React Native中有效 - ListView网格

我无法理解如何使我的网格响应？如何将项目的大小设置为50%？

我知道这是一种新语言,但我希望它可以有更详细的指南/文件.

我应该在React Native中使用哪种方法来实现像集合视图一样的水平滚动？外观和感觉需要与原生iOS完全相似UICollectionView.

(我知道有一些网站可以分享反应性的例子,但我无法通过谷歌找到它们;"反应原生共享代码"只是提出了共享按钮的代码,同样的"示例" - 什么是一个好网站用于此？)

我有一个listview(感谢这个答案,归功于@ colin-ramsay).我想做的是在每个listview中放入一些项目,让它们在容器内部对齐(复选框和同一行上的标签).但我无法做到这一点因为我无法弄清楚为什么这20个项目的数组只显示10个项目.

警报显示20个项目(0-19).

码:

import React, {Component} from 'react';
import {View, Text, StyleSheet, ListView} from 'react-native';

var styles = StyleSheet.create({
  container:{
    marginTop:65,
    margin:10, backgroundColor:"#DDDDEE"
  },
  list:{
    height:400,
    marginTop:40,
    flexDirection:'row',
    flexWrap:'wrap', justifyContent:'center', alignItems:'flex-start'
  },
  item:{
    alignItems:'flex-start',
    backgroundColor:'red', width:40, height:40, margin:3, padding:3,
    justifyContent:'center', alignItems:'center'
  }
});

class TestCmp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
    var data = Array.apply(null, {length:20}).map(Number.call, Number);
    alert(data);
    this.state = {dataSource:ds.cloneWithRows(data)};
  }

  render() { …

似乎React Native 0.32中存在一个错误.正如您在RN Play链接中所看到的,以下代码在0.20和0.24中正常工作.

https://rnplay.org/apps/W5k6Xg

'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  AppRegistry,
  ListView,
  StyleSheet,
  Text,
  View,
  Image
} = ReactNative;

var GridLayoutExample = React.createClass({

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows([
        { name: 'John', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619232-84.png' },
        { name: 'Joel', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619230-84.png' },
        { name: 'James', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619168-84.png' },
        { name: 'Jimmy', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619130-84.png' },
        { name: 'Jackson', image: 'https://d30y9cdsu7xlg0.cloudfront.net/png/619098-84.png' },
        { name: …