如何在 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。

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