如何將文本傳遞到 React-Native 中的組件？ （安卓）

Question

我正在調用以下 function

const LevelCard = (level) => {
    const currLevel = level;
    console.log(currLevel)
    return (
        <View style={{
            flex: 1,
            width: 400,
            alignItems: 'center', 
            justifyContent: 'center'
        }}>
        <CategoryButton
            title='Text should go here'
            onPress={() => navigation.navigate('')}
        />
        </View>
    );
}

從另一個組件

function CallFunction() {
    return (
      <SafeAreaView style={styles.categories}>
        <ScrollView horizontal={true} style={styles.scrollView}>
          <View>

            <LevelCard 
                level="This is the text I want to pass"
            />

          </View>
        </ScrollView>
      </SafeAreaView>
    );
}

但我不知道如何實際從“級別”獲取文本以顯示在 react-native 組件中的任何位置。 但是，console.log 語句在它之外可以正常工作。

謝謝

Answer 1

我建議你看一下 react 中的 props，以一般的方式來解釋它，你可以這樣想 props：“props 之於組件就像 arguments 之於函數”。 現在您正確地將文本傳遞給您的 LevelCard 組件，但您沒有正確檢索它，道具作為 object 傳遞，因此您必須從接收組件中解構它：

const LevelCard = ({ level }) => { // <--- Notice this line
  const currLevel = level;
  console.log(currLevel)
  return (
    <View style={{
        flex: 1,
        width: 400,
        alignItems: 'center', 
        justifyContent: 'center'
    }}>
    <CategoryButton
        title={level} {/* then use it like this*/}
        onPress={() => navigation.navigate('')}
    />
    </View>
  );

}