javascript - React 组件内的构造函数

Question

我对原生 react 完全陌生，您能修复以下代码吗？

我在 const 内部使用 View ，并且我需要在 const 函数内部使用构造函数

const { width } = Dimensions.get('window');
const tileWidth = width - 30;
const tileHeight = tileWidth * 0.50;
const tileHeight = tileWidth * 0.50;

    constructor(props) {
        super(props);

        this.state = {
            //tileViewWidth: null,
            tileViewHeight: null,
        }

        this.measureView = this.measureView.bind(this);
    }

    measureView(event) {
        // console.log('event properties: ', event);
        this.setState({
            //tileViewWidth: event.nativeEvent.layout.width,
            tileViewHeight: (event.nativeEvent.layout.height / 2) - 7,
        });
    }



const MyNavScreen = ({ navigation, banner }) => (

           <ScrollView style={styles.container} >

         <View style={css.home_tiles.container} onLayout={(event) => this.measureView(event)}>

<TouchableOpacity underlayColor="transparent" style={[{ width: tileWidth, height: this.state.tileViewHeight }]}> </TouchableOpacity> </View>);

Answer 1

您正在尝试向无状态组件添加状态。您可以找到很多关于它们差异的文章(例如this一篇)。使用常规组件而不是无状态组件:

class GeneralButton extends Component {
  constructor(props) {
    super(props)

    this.state = {
      //tileViewWidth: null,
      tileViewHeight: null,
    }

    this.measureView = this.measureView.bind(this)
  }

  measureView(event) {
    // console.log('event properties: ', event);
    this.setState({
      //tileViewWidth: event.nativeEvent.layout.width,
      tileViewHeight: (event.nativeEvent.layout.height / 2) - 7,
    })
  }

  render() {
    return <ScrollView style={styles.container}>
      <View style={css.home_tiles.container} onLayout={(event) => this.measureView(event)}>
        <TouchableOpacity underlayColor="transparent" style={[{width: tileWidth, height: this.state.tileViewHeight}]}>
        </TouchableOpacity>
      </View>
    </ScrollView>
  }
}