React native listview添加项不起作用-Java 学习之路

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

Main component: SurveyQn

'use strict'从'react-native'导入React，{Component，StyleSheet，Text，TouchableHighlight，TextInput，View，ListView，AlertIOS}; var LongButton = require（'./ LongButton.js'）; class SurveyQn扩展了Component {constructor（props）{
超级（道具）;

this.state = {
选项：[{option：'Pizza'}]，
};
}

componentWillMount（）{
this.dataSource = new ListView.DataSource（{
rowHasChanged :( row1，row2）=> row1！== row2
}）
}

_renderItem（item）{
回来（
<LongButton
文本=
onPress = {（）=> {}}
//btnViewStyle=
//btnTextStyle=
/>
）;
}

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

渲染（）{
var dataSource = this.dataSource.cloneWithRows（this.state.options）;
回来（
<View style = >
<的TextInput
风格= {} styles.question
placeholder =“问题 Headers ”
placeholderTextColor = “＃4B667B”
selectionColor设置= “＃4B667B”
onChangeText = {（text）=> this.setState（）} />

</查看>
<TouchableHighlight
onPress = {this._addItem.bind（本）}
风格= {} styles.buttonView
underlayColor = 'RGBA（0,0,0,0）'>
<Text style = >
添加选项
</文本>
</ TouchableHighlight>
</查看>

）;
}
} var styles = StyleSheet.create（{container：{width：300，flex：1，}，listView：{flex：1，}，question：{height：30，fontSize：20，fontWeight：“100”，color： '＃4B667B'，marginTop：10，marginBottom：10，}，buttonView：{width：300，paddingVertical：9，borderWidth：1，borderColor：'＃F868AF'，marginBottom：13，}，buttonText：{textAlign：'center '，fontSize：25，颜色：'＃F868AF'，fontWeight：'500'}，}）;

ListView item: LongButton

'use strict'导入React，{Component，StyleSheet，Text，TouchableHighlight，View，}来自'react-native'; class LongButton扩展Component {render（）{
回来（
<TouchableHighlight
onPress =
风格= {} this.props.btnViewStyle
underlayColor = 'RGBA（0,0,0,0）'>
<Text style = >
{} this.props.text
</文本>
</ TouchableHighlight>
）;
module.exports = LongButton;

在警报上添加项目时出现Xcode警告消息

app [27881：11151280]未定义UICollectionViewFlowLayout的行为，因为：app [27881：11151280]项目高度必须小于UICollectionView的高度减去截面插入顶部和底部值，减去内容插入顶部和底 Value . app [27881：11151280]相关的UICollectionViewFlowLayout实例是<UIAlertControllerCollectionViewFlowLayout：0x7ff0685b1770>，它附加到; layer =; contentOffset：{0,0}; contentSize：{0,0}>集合视图布局：< UIAlertControllerCollectionViewFlowLayout：0x7ff0685b1770> . 2016-04-06 07：50：01.545 decisionapp [27881：11151280]在UICollectionViewFlowLayoutBreakForInvalidSizes上创建一个符号断点，以便在调试器中捕获它 .

Updates: 我尝试了这个，但它也没有用 . 可能是导致这些问题的警报吗？它只是在点击btn后永远呈现警报 .

class SurveyQn扩展Component {constructor（props）{super（props）; this.state = {
选项：[{option：'Pizza'}]，
dataSource：new ListView.DataSource（{
rowHasChanged :( row1，row2）=> row1！== row2
}）
};
} componentWillMount（）{var data = this.state.options; this.state.dataSource.cloneWithRows（数据）; } _renderItem（item）{return（）; } _addItem（）{AlertIOS.alert（'添加新选项'，null，[{text：'添加'，onPress :( text）=> {var options = this.state.options; options.push（{option：text }）this.setState（{options：options}）}}，]，'plain-text'）; } render（）{return（<View style = >
<ListView的
展现dataSource =
renderRow = {this._renderItem.bind（本）} />

）;
}}

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

回复于 2024-04-26T09:03:15+08:00

React native listview添加项不起作用

1 回答

相关问题