React Native传递Props失败：无法向导航组件传递myname属性

你的问题出在两个核心点上，我来一步步帮你梳理解决：

1. 函数组件不能使用this.props #

FavoritePage是无状态函数组件，这类组件没有自己的this上下文，直接写this.props必然会触发报错。你需要把props作为参数传入组件，然后直接读取使用。

2. TabNavigator不会自动传递父组件props给内部页面 #

你在App.js里传给TabComp的myname属性，默认不会自动渗透到TabNavigator配置的子页面中，需要通过特定方式手动传递。

方案一：使用screenProps（React Navigation老版本标准方式） #

先修改App.js，把要传递的属性包裹在screenProps对象里：

export default class App extends React.Component {
  render() {
    return( <TabComp screenProps={{ myname: "bobby" }} /> )
  }
}

再修改TabComp里的FavoritePage，接收props并读取screenProps中的值：

// 函数组件接收props参数
const FavoritePage = (props) => (
  <View>
    <FavoriteComponent myname={props.screenProps.myname} />
  </View>
)

const DetailsPage = () => (
  <View>
    <DetailsComponent />
  </View>
)

export const TabComp = TabNavigator({
  FavPage: { screen: FavoritePage },
  DetailsPage: { screen: DetailsPage }
})

方案二：手动封装TabComp传递props #

如果你不想用screenProps，可以把TabComp改成一个返回TabNavigator的组件，手动将父组件的props传递给目标页面：

// App.js保持原代码不变
export default class App extends React.Component {
  render() {
    return( <TabComp myname="bobby"/> )
  }
}

修改TabComp的实现逻辑：

const FavoritePage = (props) => (
  <View>
    <FavoriteComponent myname={props.myname} />
  </View>
)

const DetailsPage = () => (
  <View>
    <DetailsComponent />
  </View>
)

// 将TabComp改为接收父组件props的组件
export const TabComp = (props) => {
  const TabNav = TabNavigator({
    FavPage: { 
      // 手动把myname传递给FavoritePage
      screen: () => <FavoritePage myname={props.myname} /> 
    },
    DetailsPage: { screen: DetailsPage }
  });
  return <TabNav />;
}

两种方案都能让FavoriteComponent正确获取到myname属性，解决你遇到的报错问题。

内容的提问来源于stack exchange，提问作者craftdeer