如何在React-Native中将文本传递到组件中？ Android

如何解决如何在React-Native中将文本传递到组件中？ Android

我正在调用以下函数

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

但我不知道如何从“级别”实际获取文本以显示在本机组件中的任何位置。但是，console.log语句在其外部可以正常工作。

谢谢

解决方法

我建议您看一下响应中的props，以一种通常的解释方式，您可以想到如下的props：“ props代表组件，而论元代表函数”。现在，您已正确地将文本传递到LevelCard组件，但未正确检索文本，props作为对象传递，因此您必须将其从接收组件中解构：

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

}