Question

我是新来的反应原生，我的脑子里实现了一个简单的想法。基本上，我正在做一个'todo list'之类的组件，下面有一个添加按钮，可以添加项目。单击添加按钮后会出现问题，列表会更新，并显示以下xcode警告消息。我已经意识到，在实现ListView之后，模拟器中的应用程序变慢了，我甚至无法检查。在输入一些文本后，警报弹出窗口将冻结UI，并且由于我无法执行任何操作，因此需要再次构建整个应用程序。谢谢你的帮助！

主要组成部分：SurveyQn

'use strict'

import React，{       零件，       样式表       文本，       TouchableHighlight，       TextInput之       视图，       列表显示，       AlertIOS   来自'react-native';

var LongButton = require（'./ LongButton.js'）;

class SurveyQn扩展了Component {
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 styles = StyleSheet.create（{       容器： {           宽度：300，           flex：1，       }，       列表显示： {           flex：1，       }，       题： {           身高：30，           fontSize：20，           fontWeight：“100”，           颜色：'＃4B667B'，           marginTop：10，           marginBottom：10，       }，       buttonView：{           宽度：300，           paddingVertical：9，           borderWidth：1，           borderColor：'＃F868AF'，           marginBottom：13，       }，       buttonText：{           textAlign：'center'，           fontSize：25，           颜色：'＃F868AF'，           fontWeight：'500'       }，   }）;

ListView项目：LongButton

'use strict'

import React，{       零件，       样式表       文本，       TouchableHighlight，       视图，   来自'react-native';

类LongButton扩展了Component {
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实例是＆lt; _UIAlertControllerCollectionViewFlowLayout：0x7ff0685b1770＆gt;，并附加到; layer =; contentOffset：{0,0}; contentSize：{0,0}＆gt;集合视图布局：＆lt; _UIAlertControllerCollectionViewFlowLayout：0x7ff0685b1770＆gt;。 2016-04-06 07：50：01.545 decisionapp [27881：11151280]在UICollectionViewFlowLayoutBreakForInvalidSizes上创建一个符号断点，以便在调试器中捕获它。

更新我试过这个，但它也没有用。可能是导致这些问题的警报吗？点击btn后，它只是永远地呈现警报。

class SurveyQn扩展了Component {

constructor（props）{          超级（道具）;
   this.state = {
       options: [{option: 'Pizza'}],
       dataSource : new ListView.DataSource({
           rowHasChanged: (row1, row2) => row1 !== row2
       })
   };
}

componentWillMount（）{          var data = this.state.options;          this.state.dataSource.cloneWithRows（数据）;      }

_renderItem（item）{          回来（              {} item.option          ）;      }

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

渲染（）{          回来（
           <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>


   );
} }

Answer 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

React native listview add item not working

1 个答案: