如何将文本传递到 React-Native 中的组件？ （安卓）

Question

我正在调用以下函数

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 组件，但您没有正确检索它，道具作为对象传递，因此您必须从接收组件中解构它：

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

}