情景:
调用安卓原生,使用广播方式给RN发消息,向数组中插入数据,渲染RN页面,导致点击按钮事件,需要等到渲染基本结束以后才会调用.
解决方案:
RN:
1.将需要渲染的页面数据单独拉出来,作为组件,组件单独渲染不会使其他组件也一起渲染
2.更新A和B组件内容需要通过ref 实现
Android:将发消息改为异步实现,不能使用同步!!!!!
export default class Home1 extends Component {
render() {
console.log('渲染根');
return (
<View style={{backgroundColor: 'white', marginTop: 100}}>
<ComponentA ref={(ref) => this.A = ref}/>
<ComponentB ref={(ref) => this.B = ref}/>
</View>
);
}
}
class ComponentA extends Component {
constructor(props) {
super(props)
this.state = {
length:0
}
}
render() {
console.log('渲染A');
return (
<Text>{this.state.lenght}</Text>
)
}
}
class ComponentB extends Component {
constructor(props) {
super(props)
this.state = {
dataList:[],
}
}
render() {
console.log('渲染B');
return (
<FlatList
style={styles.middleView}
extraData={this.state}
data={this.state.dataList}
renderItem={this._renderItem.bind(this)}
keyExtractor={(item, index) => item}>
</FlatList>
)
}
}
网友评论