Question

我的问题是在导入的组件中添加带有onPress事件的按钮。

所以我已经构建了一个外部按钮组件，我从app.js文件导入component.js

export default class App extends Component {

  {...}

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

此<Beacon />组件显示从另一个组件文件导入的图像和两个按钮：

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>
    );
  }
}

当我在app渲染中使用这些<ButtonWhite />组件时，它们可以正常工作：

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>
    );
  }
}

当我将它们移动到组件时，它们会在屏幕上显示，但不会调用该功能。

Answer 1

避免打电话

 this._stopScanning

移动组件后，您需要从组件中导入回调

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

否则你需要重构组件，只需在内部调用函数instad将它们作为props

接收

Answer 2

已解决 - 需要使用构造函数来引用该函数。

vector<vector<char>> sudoku4 = 
  {{'.', '8', '7', '6', '5', '4', '3', '2', '1'}, 
   {'2', '.', '.', '.', '.', '.', '.', '.', '.'},
   {'3', '.', '.', '.', '.', '.', '.', '.', '.'}, 
   {'4', '.', '.', '.', '.', '.', '.', '.', '.'},
   {'5', '.', '.', '.', '.', '.', '.', '.', '.'}, 
   {'6', '.', '.', '.', '.', '.', '.', '.', '.'}, 
   {'7', '.', '.', '.', '.', '.', '.', '.', '.'}, 
   {'8', '.', '.', '.', '.', '.', '.', '.', '.'}, 
   {'9', '.', '.', '.', '.', '.', '.', '.', '.'}};

Answer 3

如果这是您渲染组件的地方：

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

然后你想把道具传递给组件：

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

在Beacon组件中，您想要调用道具：

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>
    );
  }
}

React Native Component - OnPress功能不起作用

3 个答案: