[英]How to pass text into component in React-Native? (Android)
I'm calling the following function我正在调用以下 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>
);
}
from another component从另一个组件
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>
);
}
but I can't figure out how to actually get the text from 'level' to show up anywhere in the react-native components.但我不知道如何实际从“级别”获取文本以显示在 react-native 组件中的任何位置。 The console.log statements work correctly outside of it however.
但是,console.log 语句在它之外可以正常工作。
Thanks谢谢
i recomend you to take a look at props in react, in a general way of explaining it, you can think of props like this: "props are to components what arguments are to functions".我建议你看一下 react 中的 props,以一般的方式来解释它,你可以这样想 props:“props 之于组件就像 arguments 之于函数”。 Right now you are correctly passing the text to your LevelCard Component but you are not retrieving it correctly, props are passed as an object so you have to destructure it from the receiving component:
现在您正确地将文本传递给您的 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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.