如何在 React-Native 中从另一个类调用一个类

Question

Oo .. 对不起，如果我的脚本令人困惑，因为实际上我已经删除了两个选项以使其看起来更简单，但它使问题方向不清楚。 这是完整的脚本

import { Button, Text,  View, TouchableOpacity, StatusBar} from 'react-native';

import ScanQR from './ScanQR';
import SalesTrans from './SalesTrans';
import Inventory from './Inventory';

export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('ScanQR')}>
                <Text style={styles.heading}>Scanning QR</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('SalesTrans')}>
                <Text style={styles.heading}>Sales Transaction</Text>
            </TouchableOpacity>
            <TouchableOpacity 
                onPress={this.props.navigation.navigate('Inventory')}>
                <Text style={styles.heading}>Inventory Status</Text>
            </TouchableOpacity>
      </View>
    );
  }
}

这是一个安卓屏幕显示

我想要的是，如果选择了扫描二维码，则扫描二维码页面将打开，同样，如果选择库存状态，库存页面将打开。 谢谢

Answer 1

如果你想在这个类中呈现 ScanQR 类，你可以这样做

import { Text,  View, TouchableOpacity, StatusBar} from 'react-native';

import ScanQR from './ScanQR';

export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>

    <ScanQR />

      </View>
    );
  }
}

否则如果你想从这个类导航到 ScanQR 类，那么首先在应用程序导航堆栈中添加 ScanQR 类，如果它的屏幕名称是 ScanQR ，你可以实现像你之前所做的那样，

import { Text,  View, TouchableOpacity, StatusBar} from 'react-native';


export default class Home extends Component{
    constructor(props){
        super(props)
      } 
  render() {
    return (
      <View style={styles.container}>
            <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "yellow" translucent = {true}/>

            <TouchableOpacity onPress={this.props.navigation.navigate('ScanQR')}><Text style={styles.heading}>Scanning QR</Text></TouchableOpacity>

      </View>
    );
  }
}

随时提出任何疑问

Answer 2

如果要访问子类，则需要使用 props，如果要从子类访问父类，则需要使用 refs。

你可以在这里找到完整的答案