Question

在react-native中触发旋转事件有一个小问题。

我收到pip install numpy是this.setState的错误。当我使用undefined时，什么也没发生。

编辑

应用

this.onLayout.bind(this)

index.html（网络应用）

const win = Dimensions.get('window');

constructor(props) {
    super(props);

    this.state = {
        height: win.height,
        width: win.width
    }
}

onLayout (e) {
    console.log(e);

    this.setState({
      height: e.nativeEvent.layout.height,
      width: e.nativeEvent.layout.width,
    })
}


render() {
   return <View style={[styles.container, {width: this.state.width, height: this.state.height }]} onLayout={this.onLayout}>
      <WebView
        source={webapp2}
        originWhitelist={'["*"]'}
        automaticallyAdjustContentInsets={true}
        allowFileAccess={true}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        scalesPageToFit={true}
        scrollEnabled={false}
        mixedContentMode='always'
      />
    </View>
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  }
});

当我使用简单的<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> <style media="screen" type="text/css"> #container, #test { width:100%; height:100%; top:0; left:0; right:0; bottom:0; position:absolute; user-select: none; -webkit-user-select: none; border:1px solid red; } </style> </head> <body> <br><br><br><br><br><h1>aaaa</h1> <div id="test"></div> </body> </html>

时，也不会触发该事件

Answer 1

如果您使用

之类的方法

onLayout (e) {
    console.log(e);

    this.setState({
      height: e.nativeEvent.layout.height,
      width: e.nativeEvent.layout.width,
    })

您必须将其绑定到构造器中，如：

this.onLayout = this.onLayout.bind(this)

Answer 2

我最近遇到过类似的问题，我知道是什么原因引起的，但不知道如何解决。

这是一个点心小吃博览会的例子：Link

尝试取消注释

       /*   {
      width: width,
      height: height,
    }, */

onLayout立即停止运行。

如果将状态设置的值用作样式，并且此状态由onLayout函数更新，则仅触发两次。

我的意思是，这看起来不兼容，或者也许可以通过某种方式对其进行管理。

我是React Native的始祖，

有人知道这个行为以及如何“解决”它吗？

本地反应-不触发onLayout

2 个答案: