我已经开始学习React Native,并且一如既往地从创建可重用组件开始。我了解了如何在创建自定义组件时传递和访问道具。
我想在React Native中创建一个具有通用属性的基本屏幕,并且我的应用程序中的所有屏幕都可以设置,例如标题。
在下面,我为应用程序的主页创建一个新屏幕
class APCComponent extends Component { constructor(props) { super(props); } render() { //dummy function, will always get overridden in the child return ( <View /> ); } } export default class Home extends APCComponent { //I somehow want to pass a string to the parent APCComponent //and want APCComponent use it to set the Header of the navigation constructor() { super({ title: 'Home' }); } //Right now the following works, but in case I use a different type of Navigation, //I'll have to change all components. By just setting a string, I'm allowing my base //component to display the header static navigationOptions = { title: "Home" }; //from react-navigtion's StackNavigator render() { return <Button title="Sample Button" />; } }
谢谢
class BaseComponent extends Component { render() { return (){ <Header title={this.props.title} /> } } } class HomeScreen extends Component { render() { return (){ <BaseComponent title='this is your home screen' /> } } }
其中Headercomponent也是一个单独的可重用组件。
Header
您需要将道具(在我们的示例中为“ title”)从上级组件传递到基础级组件,如上例所示。