我正在开发一个应用程序，其中一个部分包含玩家列表。列表中的每个项目都包含玩家的姓名、他/她拥有的点数以及用于更改点数的 IOS 步进器。 See the app screen I'm talking about.
每次我使用 IOS 步进器修改播放器的点数时，应用程序的状态都会根据该值发生变化。但是，包含玩家分数的文本不会被修改。渲染函数被调用，应用程序的状态没有改变，所以文本组件也应该改变。我发现当调用 render 函数时，它会“跳过”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);
我希望你能帮我解决这个问题，谢谢!
最佳答案
我终于解决了这个问题。 Native Base 动态列表组件基于 React Native ListView 。 ListView 仅在其 prop dataSource 更改时才重新呈现。由于我无法更改原生基础动态列表 dataSource Prop (因为它没有直接拥有此 Prop ，它有一个名为 dataArray 的类似 Prop ，它在更改时不会产生重新渲染)，我最终使用了一个 react 原生 ListView 组件。因此，每次我希望它重新呈现时，我只需要更改数据源属性，因此每一行内的项目都在刷新和观察到。
对于我在一些帖子中读到的内容，native base 正在研究一种解决方案，以便提供控制其列表组件重新呈现的可能性(例如通过 dataSource prop 响应 native 报价)。
关于Javascript - react native 。调用 Render() 函数时，子组件(动态列表)不呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45068432/