React组件内部的构造函数

Question

我是完全陌生的反应原生， 你可以修改下面的代码吗？使用荫内部常量的景色，我需要使用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> 
    } 
}