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

Question

我是原生反应新手，我在脑海中实现了一个简单的想法。基本上，我正在做一个类似于组件的“待办事项列表”，下面有一个添加按钮，可以添加项目。单击添加按钮并更新列表并出现以下 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>


   );

} }

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