美文网首页
React Native SetState导致按钮点击失效

React Native SetState导致按钮点击失效

作者: Bana | 来源:发表于2018-11-26 10:33 被阅读55次

    情景:
    调用安卓原生,使用广播方式给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>
            )
        }
    }
    

    相关文章

      网友评论

          本文标题:React Native SetState导致按钮点击失效

          本文链接:https://www.haomeiwen.com/subject/xubvqqtx.html