标签: react-native-listview

我正在使用酶来测试我的组件渲染.

测试ListView物品的常用方法是什么？例如,在下面的例子中测试单击一个项目时,它会触发onSelect传递id 的prop吗？

我目前正在使用react-native-mock这意味着ListView它不会呈现任何内容,并且我无法将项目分成单独的组件,因为它需要onSelect来自父项的prop.

export default class extends React.Component {
   constructor(props) {
       super(props);
       this.dataSource = new ListView.DataSource({
           rowHasChanged: (r1, r2) => r1 !== r2
       })
    }
    renderItem = ({id, title}) => {
        const {onSelect} = this.props;
        return <Button onPress={() => onSelect(id)}>{title}</Button>;
    }
    render() {
        const dataSource = this.dataSource.cloneWithRows(this.props.items);
        return (
            <ListView dataSource={dataSource}
                      renderRow={this.renderItem } />)
    }      
}

我是反应原生的新手.我在https://facebook.github.io/react-native/docs/sample-application-movies.html中看到了一个例子.它正在构建一个电影应用程序,可以获取电影并在ListView中显示它们.我们如何选择一行来获取其详细数据并在其他视图中显示？请帮忙.谢谢 :)

这是我到目前为止所做的:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

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

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {

  snapVelocity: 8,
  edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  springTension: 100,
  springFriction: 1,
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});

var PageOne = React.createClass({
  getInitialState:function(){
    return{
      dataSource: …

当您在 ReactNative 应用程序中使用 ScrollView 或 ListView 并且一些新数据进来时，它们的默认行为是保持 Scroll 组件中的位置。这意味着如果当你在 ScrollView 中间时，高度为 20 的新数据进来，屏幕上的项目将滑动 20，有时它会离开屏幕。

有没有办法保持/跟踪位置？例如，如果新的高度为 20 的数据进来，则位置自动调整位置 20，使当前屏幕项目保持在屏幕上。提前致谢。

我react-native用于iOS移动应用程序,我用它ListView来显示警报列表.我创建了自己的可重用列表视图组件,ComponentListView在其中我可以传入我想在每行中呈现的组件和列表视图的数据.如果我有很多闹钟,我向下滚动查看最后的闹钟,它总是滚动到顶部(请参阅下面有关症状的rnplay上的示例应用程序)因此我最终无法对闹钟进行操作.我认为它可能与我如何创建ComponentListView组件有关,因为如果我只是使用一个简单的ListView组件,它按预期工作但我需要使用ComponentListView组件,因为我有许多不同的屏幕,我必须显示一个包含不同组件的列表它简化了我的工作.

我在rnplay上创建了一个示例应用程序来显示这些症状.请在iOS上运行.下面AlarmList是使用ComponentListView显示报警的列表,并AlarmSummary为每行中显示的组件.

rnplay上的示例应用程序

我尝试使用ComponentListView的render方法中的一些控制台日志语句来调试它,以检查组件是否在滚动时一次又一次地重新渲染,但似乎并非如此.我也尝试在Chrome调试器中调试,但我有点想法,不知道如何/在哪里调试.

如果您有任何指示可以解决问题,请告诉我.

在使用Objective-C的iOS中,我们可以UITableView使用scrollToRowAtIndexPath方法滚动到特定的行索引但在React-Native中我没有找到这种方法来滚动Listview特定的行索引.

以下是该场景,

1. 有Listview这样的可扩展行,就像敲击它扩展和可扩展行包含TextInput组件.
2. 在输入文本时TextInput,键盘将显示出来,理想情况下,此时Listview键盘Listview应向上滚动(一旦键盘下降,应向下滚动到其先前位置).

这可以通过Native-iOS轻松实现,但我被困在React-Native中.

我按照方式做了但是没有做到

有称为方法scrollTo(x:0,y:10,animated:true)中Listview组分(实际上是其的方法Scrollview),通过该可滚动向上/向下基于所述y坐标父视图的.

我在我的代码中成功接收了键盘的向上和向下事件,并且基于这种情况我可以通过某种方式管理键盘启动时的scrollTo方法(通过计算y坐标)(如@ Alexey的答案中所述)但我不知道如何计算y键盘关闭时的坐标？(理想情况下,此时Listview应向下滚动到其先前的位置).

任何帮助或提示将不胜感激!

我有一些对象,如下例所示;

[{
        "id" : 13100,
        "key" : "Emlak Vergisi",
        "y" : 135638.98
    }, {
        "id" : 13154,
        "key" : "Çevre Temizlik ",
        "y" : 956.17
    }, {
        "id" : 19998,
        "key" : "Genel Tahakkuk",
        "y" : 89030.62
    }, {
        "id" : 24998,
        "key" : "Gecekondu ve So",
        "y" : 42721.07
    }, {
        "id" : 60000,
        "key" : "Ortak Gelirler",
        "y" : 827.42
    }
]

是否可以为每个项目设置一个带有交替颜色的列表视图？

我有这段反应原生代码:

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

let styles = require('./styles/styles');

class Sunshine extends Component {

  constructor(props) {
    super(props);
      this.state = {isLoading: true, jsonData: ''}

  }
  componentDidMount() {
    this.setState({jsonData: this.getMoviesFromApiAsync()})
  }
  render() {
    if(this.state.isLoading != true) {
      return (
        <View style={styles.container}>
        <ToolbarAndroid
        style={styles.baseToolbar}
        logo={require('./ic_launcher.png')}
        title="Sunshine"
        titleTextColor="red"/>
        <View style={styles.viewcontainer}>
        <Text>{this.state.jsonData.city.id}</Text>
        <ListView
          dataSource={this.state.jsonData.list}
          renderRow={(rowData) => <Text>{rowData.dt}</Text>}
        />
        </View>
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
        <ToolbarAndroid
        style={styles.baseToolbar}
        logo={require('./ic_launcher.png')} …

问题是listview不滚动.我试过很多款式,但我找不到方法.我使用React-Native 0.39.2.我试过Android设备

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, TextInput
} from 'react-native';
//import MapView from 'react-native-maps';
import { Button,CheckBox} from 'react-native-elements'
import { List, ListItem } from 'react-native-elements'



export default class Kpss extends Component {
    constructor(props) {
        super(props);

    }
  render() {
      const list = [
          {
              name: 'Amy Farha',
              avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
              subtitle: 'Vice President'
          },
          {
              name: 'Chris Jackson',
              avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
              subtitle: …

我正在使用FlatList和一个结果ListHeaderComponent作为我的屏幕的根组件.我不希望它的顶部在滚动上反弹,但我想保持底部弹跳以用于UX'n'feel目的,因为FlatList支持无限滚动.任何想法怎么样？

在我的componentDidMount()我做一个查询，我从 MongoDb 数据库接收一些我想显示在FlatList. 当我收到查询的结果时，我使用state.list函数mapToList()将它们映射到我的list.id我这里使用的是_id由 MongoDb 本身生成的插入文档。只是有一个id在这里工作。然后我添加key={item.id}到我的renderItem({item})方法，但我仍然收到错误，我必须将键添加到我的 VirtualizedList 或使用 KeyExtractor。

我试图从FlatList使用中删除一个项目，Swipeout但首先我必须让这个id东西工作。

export default class MyFlatList extends React.Component{
 state={   
 loading: false,
 list: [{
   name: '',
   subtitle: '',
   rightSubtitle: '',
   rightTitle: '',
   id: undefined
 }]
};

mapToList();

mapToList(result)
{ 
  const list = [];
  for(var i = 0; i<result.length; i++)
  {
      list[i] =  {name: result[i].name,
      subtitle : result[i].projectname,
      rightTitle : …