我有一个iOS应用,我正在用react native制作.游戏类包含一个ListView组件.我在构造函数中设置状态,并包含一个dataSource.我现在有一个硬编码的数据数组,存储在不同的州属性中(this.state.ds).然后在componentDidMount中,我使用cloneWithRows方法克隆this.state.ds作为视图的数据源.就ListView而言,这是相当标准的,而且运行良好.以下是代码:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

 var React = require("react-native");
 var { StyleSheet, Text, View, ListView, TouchableHighlight } = React;

class Games extends React.Component {
constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 != r2
    });
    this.state = {
        ds: [
            { AwayTeam: "TeamA", HomeTeam: "TeamB", Selection: "AwayTeam" },
            { AwayTeam: "TeamC", HomeTeam: "TeamD", Selection: "HomeTeam" }
        ],
        dataSource: ds
    };
}

componentDidMount() {
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.state.ds)
    });
}
pressRow(rowData) {
    var newDs = [];
    newDs = this.state.ds;
    newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam";
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newDs)
    });
}

renderRow(rowData) {
    return (
        <TouchableHighlight
            onPress={() => this.pressRow(rowData)}
            underlayColor="#ddd"
        >
            <View style={styles.row}>
                <Text style={{ fontSize: 18 }}>
                    {rowData.AwayTeam} @ {rowData.HomeTeam}{" "}
                </Text>
                <View style={{ flex: 1 }}>
                    <Text style={styles.selectionText}>
                        {rowData[rowData.Selection]}
                    </Text>
                </View>
            </View>
        </TouchableHighlight>
    );
}
render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)}
        />
    );
}
}
var styles = StyleSheet.create({
 row: {
    flex: 1,
    flexDirection: "row",
    padding: 18,
    borderBottomWidth: 1,
    borderColor: "#d7d7d7"
},
selectionText: {
    fontSize: 15,
    paddingTop: 3,
    color: "#b5b5b5",
    textAlign: "right"
}
});


module.exports = Games

我遇到的问题来自pressRow法.当用户按下该行时,我希望 Select 发生变化,并在设备上呈现变化.通过一些调试,我注意到,即使我正在更改newDs数组中对象的Selection属性,this.state.ds中对象的相同属性也会更改,this.state.dataSource._dataBlob.s1中的对象也会更改.通过进一步调试,我发现由于其他数组已经更改,ListView的DataSource对象无法识别更改,因为当我设置状态并调用rowHasChanged时,它正在克隆的数组与数组this.state.dataSource._dataBlob.s1匹配,因此它看起来不像更改,也不会重新加载.

有什么 idea 吗?

推荐答案

试试这个:

pressRow(rowData){

    var newDs = [];
    newDs = this.state.ds.slice();
    newDs[0].Selection = newDs[0] == "AwayTeam" ? "HomeTeam" : "AwayTeam";
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(newDs)
    })

}

这应该是数组的一个副本,然后可以在this.state.ds分钟内独立于原始数组进行修改.

React-native相关问答推荐

React Native的TouchableOpacity不按类别获取样式名称

如何将 react-native 图像从 expo-image-picker 上传到使用 multer 的 Express.js 后端

Visual Studio 代码错误:-Failed to start flow Error: Wrong version of Flow. The config specifies version ^0.92.0 but this is version 0.95.1

React Native Card Carousel 视图?

React Navigation 5 隐藏Drawer抽屉元素

由于依赖关系,在 run-android 上构建失败

Firebase检测用户是否存在

ld:找不到-lFirebaseCore clang的库: error: linker command failed with exit code 1 (use -v to see invocation)

Typescript:onPress 类型

如何在 React Native 中按住以 Select 文本

React Native Expo StackNavigator 重叠通知栏

Native Script 与 react native 和 ionic 框架的区别

如何将样式传递给 React-Native 中的容器组件

React.createClass vs. ES6 箭头函数

如何从 React-Native 中的另一个类调用函数?

居中图像 React Native 加载屏幕

在 React-native 上加载图像时出错:Unexpected character

如何为 TouchableOpacity 组件创建禁用样式?

Super expression must either be null or a function, not undefined

手动调用 React.PropTypes 验证 React native "^0.30.0"