反应本机列表视图添加项目不起作用

Posted 2023-02-22

【中文标题】反应本机列表视图添加项目不起作用

【英文标题】：React native listview add item not working

【发布时间】：2016-07-26 04:50:12

【问题描述】：

我是原生反应新手，我在脑海中实现了一个简单的想法。基本上，我正在做一个类似于组件的“待办事项列表”，下面有一个添加按钮，可以添加项目。单击添加按钮并更新列表并出现以下 xcode 警告消息后会出现问题。而且我已经意识到，在实现 ListView 之后，模拟器中的应用程序速度变慢了，我什至无法检查。在输入一些文本后，警报弹出窗口也会冻结 UI，并且整个应用程序需要重新构建，因为我无能为力。感谢大家的帮助！

主要组件：SurveyQn

'使用严格'

导入反应， 零件， 样式表， 文本， 可触摸高亮， 文本输入， 看法， 列表显示， 警报系统 来自 'react-native';

var LongButton = require('./LongButton.js');

类 SurveyQn 扩展组件

constructor(props) 
    super(props);

    this.state = 
        options: [option: 'Pizza'],
    ;


componentWillMount() 
    this.dataSource = new ListView.DataSource(
        rowHasChanged: (row1, row2) => row1 !== row2
    )


_renderItem(item) 
    return (
        <LongButton 
            text=item.option 
            onPress=() =>  
            //btnViewStyle=styles.buttonView
            //btnTextStyle=styles.buttonText
        />
    );


_addItem() 
    Alertios.alert(
        'Add new option',
        null,
        [
            
                text: 'Add',
                onPress: (text) => 
                    var options = this.state.options;
                    options.push(option: text)
                    this.setState( options: options)
                
            ,
        ],
        'plain-text'
    );


render()
    var dataSource = this.dataSource.cloneWithRows(this.state.options);
    return (
        <View style=styles.container>
            <TextInput
                style=styles.question
                placeholder="Question title"
                placeholderTextColor="#4B667B"
                selectionColor="#4B667B"
                onChangeText=(text) => this.setState(text)/>

            <View style=styles.listView>
                <ListView
                    dataSource=dataSource
                    renderRow=this._renderItem.bind(this)/>

            </View>
                <TouchableHighlight 
                    onPress=this._addItem.bind(this)
                    style=styles.buttonView
                    underlayColor='rgba(0,0,0,0)'>
                    <Text style=styles.buttonText>
                        Add option
                    </Text>
                </TouchableHighlight>
        </View>


    );

var 样式 = StyleSheet.create( 容器： 宽度：300， 弹性：1， , 列表显示： 弹性：1， , 题： 身高：30， 字体大小：20， 字体重量：“100”， 颜色：'#4B667B', 边距顶部：10， 边距底部：10， , 按钮视图： 宽度：300， 填充垂直：9， 边框宽度：1， 边框颜色：'#F868AF', 边距底部：13， , 按钮文本： textAlign: '居中', 字体大小：25， 颜色：'#F868AF', 字体重量：'500' , );

ListView 项：LongButton

'使用严格'

导入反应， 零件， 样式表， 文本， 可触摸高亮， 看法， 来自 'react-native';

类 LongButton 扩展组件

render()
    return (
        <TouchableHighlight 
            onPress=this.props.onPress
            style=this.props.btnViewStyle
            underlayColor='rgba(0,0,0,0)'>
            <Text style=this.props.btnTextStyle>
                this.props.text
            </Text>
        </TouchableHighlight>
    );

module.exports = LongButton;

Xcode 在添加项目时发出警告消息

app[27881:11151280] UICollectionViewFlowLayout 的行为未定义，因为： app[27881:11151280] 项目高度必须小于 UICollectionView 的高度减去部分插入顶部和底部值，减去内容插入顶部和底部值。 app[27881:11151280] 相关的 UICollectionViewFlowLayout 实例是 <_uialertcontrollercollectionviewflowlayout:>，它是附加到；层 = ;内容偏移：0, 0; contentSize：0, 0> 集合视图布局：<_uialertcontrollercollectionviewflowlayout>。 2016-04-06 07:50:01.545 decisionapp[27881:11151280] 在 UICollectionViewFlowLayoutBreakForInvalidSizes 处创建一个符号断点以在调试器中捕获此问题。

更新： 我试过这个，但它也不起作用。可能是导致这些问题的警报吗？单击 btn 后，它只需要永远呈现警报。

类 SurveyQn 扩展组件

构造函数（道具） 超级（道具）；

   this.state = 
       options: [option: 'Pizza'],
       dataSource : new ListView.DataSource(
           rowHasChanged: (row1, row2) => row1 !== row2
       )
   ;

componentWillMount() var data = this.state.options; this.state.dataSource.cloneWithRows(data);

_renderItem(项目) 返回 （ item.option );

_addItem() AlertIOS.alert( '添加新选项', 空值， [ 文本：'添加'， onPress：（文本）=> var options = this.state.options; options.push(option: text) this.setState( 选项：选项) , ], '纯文本' );

渲染（） 返回 （

           <View style=styles.listView>
               <ListView
                   dataSource=this.state.dataSource
                   renderRow=this._renderItem.bind(this)/>

           </View>
               <TouchableHighlight 
                   onPress=this._addItem.bind(this)
                   style=styles.buttonView
                   underlayColor='rgba(0,0,0,0)'>
                   <Text style=styles.buttonText>
                       Add option
                   </Text>
               </TouchableHighlight>
       </View>


   );

【参考方案1】：

在深入研究复杂的 EcmaScript 表示法之前，您可以使用简单的表示法。下面是一个简单的 ListView 示例。请仔细阅读并了解它是如何工作的。

var API = require('./API');
module.exports = React.createClass(
  getInitialState: function()
    return 
      rawData: [],
      dataSource: new ListView.DataSource(
        rowHasChanged: (row1, row2) => row1 !== row2
      ),
      loaded: false,
    
  ,
  componentWillMount: function()
    this.loadData();
  ,
  loadData: function()
    API.getItems()
    .then((data) => 
      this.setState(
        rawData: this.state.rawData.concat(data),
        dataSource: this.state.dataSource.cloneWithRows(data),
        loaded: true,
      );
    );
  ,
  render: function()
    return(
        <ListView 
          dataSource=this.state.dataSource
          renderRow=this.renderItem
          style=styles.listView>
        </ListView> 
    );
  ,
  renderItem: function(item)
    return (
      <View>
          <Text>Custom Item</Text>
      </View>
    );
  ,

在 API.js 中，我从 API 获取数据。

getItems: function()
        var REQUEST_URL = 'http://api.example.org/item/get?api_key=xxxx;
        return fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => 
                return responseData.results.sort(sortByDate);
            );
    

代码可能不起作用，因为我没有测试过。但是你可以参考我在 github 上的示例项目。 Repo

【讨论】：

我已经阅读了 ListViews 教程，但您知道我哪里出错了吗？

@jomaint 是的。您的代码中有多个错误。在componentWillMount() 中使用的this.dataSource 是错误的。你的反应类中没有任何东西叫做dataSource。您需要在getInitialState() 或构造函数中声明datasource。之后，您可以解决剩余的潜在错误。