Question

我正在尝试将名为App.js的{{1}}中的简单道具传递给处理所有导航myname并尝试将其渲染到其中一个屏幕的组件。

App.js

TabComp

TabComp

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

一旦const FavoritePage = () => ( <View> <FavoriteComponent myname={this.props.myname} /> </View> ) const DetailsPage = () => ( <View> <DetailsComponent /> </View> ) export const TabComp = TabNavigator({ FavPage: { screen: FavoritePage, } DetailsPage: { screen: DetailsPage, } })我收到错误<FavoriteComponent myname={this.props.myname} />。

Answer 1

由于它是无状态函数而不是类，因此不使用this：

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

Answer 2

使用screenProps传递params，比如

<TabComp 
  screenProps={{myname:"bobby"}}/>

然后在FavoritePage

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

和DetailsPage中的相同

这是doc

无法通过反应原生

2 个答案: