Question

我正在开发一款应用，其中一个部分包含一系列播放器。列表中的每个项目都包含播放器的名称，他/她拥有的点以及更改de点的IOS步进器。 See the app screen I'm talking about.

每次使用IOS步进器修改播放器的点数时，应用程序的状态都会根据该值进行更改。但是，包含播放器点数的文本不会被修改。调用render函数并且app的状态没有变异，因此文本组件也应该更改。我发现当调用渲染函数时它会跳过＆＃34;跳跃＆＃34;在List组件上，所以没有渲染，并且不调用renderRow函数。

当我切换到TabBar的第二个标签然后我回到第一个标签时，文本仅显示当前玩家的分数。在这种情况下，List组件被渲染。

我认为这是一个非常奇怪的情况，我已经尝试了一切来解决它，但我还没有找到任何解决方案。我留下下面的代码。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {View, Text} from 'react-native';
import {Container, Content, Picker, Header, Title, Subtitle, Button, Left, 
Right, Body, Icon, List, ListItem, Input } from 'native-base';
import {ferLlistaRondes, canviDeRonda, crearObjectePPR, modificarPunts, 
canviarColorPunts} from '../actions';
import SimpleStepper from 'react-native-simple-stepper';

class SetPoints extends Component {
  constructor() {
    super()
    this.modifyPunts = this.modifyPunts.bind(this);
    this.changeDeRonda = this.changeDeRonda.bind(this);
    this.renderRow = this.renderRow.bind(this)
  }

  modifyPunts(value, nomJugador) {
    this.props.modificarPunts(nomJugador, value, this.props.currentRound)
  }

  changeDeRonda(novaRonda) {
    this.props.canviDeRonda(novaRonda);
  }

  renderRow(data) {
    return(
      <ListItem icon>
        <Left>
            <Icon name = 'md-person'/>
        </Left>
        <Body>
           <Text>{data}</Text>
        </Body>
        <Right>
          <View style = {styles.pointsViewStyle}>
            <Text>
              {this.props.ObjRondaJugadorPunts[data][this.props.currentRound-1]}
            </Text>
          </View>
          <SimpleStepper
            initialValue = {this.props.ObjRondaJugadorPunts[data]
[this.props.currentRound-1]}
            stepValue = {5}
            minimumValue = {-100}
            maximumValue = {100}
            padding = {2}
            valueChanged = {(value) => this.modifyPunts(value,data)}
          />
        </Right>
      </ListItem>
    )
  }

  render() {
    return (
      <Container>
        <Content>
          <List
            dataArray={this.props.llistaFinal}
            renderRow={(data) => this.renderRow(data)}
          />
        </Content>
      </Container>
    )
  }

}

const styles = {
  subtitleStyle: {
    fontSize: 12,
    fontFamily:'Noteworthy'
  },
  pointsViewStyle: {
    paddingRight:10
  },
  pickerViewStyle: {
    alignItems: 'center'
  }
}

const mapStateToProps = (state) => {
  return {
    numJugadors: state.appRender.jugadors,
    numRondes: state.appRender.rondes,
    llistaFinal: state.appRender.llistaNomsAcabada,
    llistaRondes: state.appRender.llistaRondes,
    currentRound: state.appRender.currentRound,
    ObjRondaJugadorPunts: state.appRender.roundPlayerPointsObj,
    colorPunts: state.appRender.colorPunts
  }
}

export default connect(mapStateToProps, {ferLlistaRondes, crearObjectePPR, 
canviDeRonda, modificarPunts, canviarColorPunts})(SetPoints);

我希望你能帮我解决这个问题，谢谢！

Answer 1

我终于解决了这个问题。 Native Base动态列表组件基于react native list视图。列表视图仅在其prop dataSource更改时才会重新呈现。由于我无法更改本机基础动态列表dataSource prop（因为它没有直接拥有此prop，它有一个名为dataArray的类似的，当它发生更改时不会产生rerender），我最终使用了一个react本机列表视图组件。因此，每次我想让它重新渲染时，我只需要更改数据源道具，因此每一行内的项目都是令人耳目一新的。

对于我在某些帖子中读到的内容，本机库正在研究解决方案，以便提供控制其列表组件的重新呈现的可能性（例如通过dataSource prop反应本机商品）。

Javascript - React Native。调用Render（）函数时，子组件（动态列表）不会呈现

1 个答案: