反应本机组件-OnPress函数不起作用

Question

My question is about adding buttons with onPress events in imported components.

So I've built an external button component which I'm importing into app.js from a component.js file

export default class App extends Component {

  {...}

  render() {
    return (
      <Container style={{ backgroundColor: 'rgb(245, 247, 250)' }}>
        {renderIf(display.beacon, <Beacon />)}
      </Container>
    );
  }
}

This <Beacon /> component displays an image and two buttons imported from another component file:

export class Beacon extends Component {
  render() {
    return (
      <Grid>
        <Row>
        <Image
          source={require("./scenerios/Welcome.png")}
          style={styles.MainContainer}
          />
          </Row>
          <Row style={ {backgroundColor: Blue} } >
          <ButtonWhite onPress={this._startScanning} name={"Start Scanning"} />
          <ButtonWhite onPress={this._stopScanning} name={"Stop Scanning"} />
          </Row>  
        </Grid>
    );
  }
}

When I use these <ButtonWhite /> components in the app render like below they work fine:

export default class App extends Component {

  {...}

  render() {
    return (
      <Container style={{ backgroundColor: 'rgb(245, 247, 250)' }}>
          <ButtonWhite onPress={this._startScanning} name={"Start Scanning"} />
          <ButtonWhite onPress={this._stopScanning} name={"Stop Scanning"} />
      </Container>
    );
  }
}

The moment I move these to the component, they display on screen but do not call the function.

Answer 1

avoid to call

 this._stopScanning

once you are moving your component you need to import the callback from your component

import {_stopScanning} from <Component where you have the callbacks>

otherwise you need to refactor the component and just call the function internally instad to receive them as props

Answer 2

Solved - Needed to use constructor to reference the function.

export class UnknownBeacon extends Component {

  constructor(props) {
    super(props);
    this.state = 
      {
        mainAppRef : props.mainAppRef
      };
  }

  render() {
    return (
      <Grid>
        <Row>
        <Image
          source={require("./scenerios/Welcome.png")}
          style={styles.MainContainer}
         />
         </Row>
         <Row style={ {backgroundColor: tflBlue} } >
         <TfLButtonWhite onPress={this.state.mainAppRef._startScanning} name={"Start Scanning"} />
         <TfLButtonWhite onPress={this.state.mainAppRef._stopScanning} name={"Stop Scanning"} />
         </Row>  
        </Grid>
    );
  }
}

Answer 3

If this is the place where you render the component:

{renderIf(display.beacon, <Beacon />)}

Then you want to pass props to the component:

{renderIf(display.beacon, <Beacon
  startScanning={() => this._startScanning()}
  stopScanning ={() => this._stopScanning()}
/>)}

And in Beacon component you want to call the props:

export class Beacon extends Component {
  render() {
    return (
      <Grid>
        <Row>
        <Image
          source={require("./scenerios/Welcome.png")}
          style={styles.MainContainer}
         />
         </Row>
         <Row style={ {backgroundColor: Blue} } >
         <ButtonWhite onPress={this.props.startScanning} name={"Start Scanning"} />
         <ButtonWhite onPress={this.props.stopScanning} name={"Stop Scanning"} />
         </Row>  
        </Grid>
    );
  }
}