React-Navigation: TabNavigator 中的动态标题。未定义不是 object

Question

我刚开始使用 React Navigation 和 TabNavigator。

我有 2 个选项卡：ChannelScreen 和 ListScreen。当我单击 ListScreen 中的频道之一时，ChannelScreen 的标题应该被替换。

频道屏幕:

export default class ChannelScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.title}`,
  })

列表屏幕:

export default class ListScreen extends Component {
  handlePress = (channelKey, channelName) => {
    console.log('change channel', channelKey, channelName)
    this.props.navigation.navigate('ChannelScreen', { title: channelName });
  }
render() {
    return(
    <View style={styles.container}>
    <TouchableOpacity
    style={styles.channelCard}
    onPress={() => {
        this.handlePress('01','Channel 1')
      }}
    >
       <Text>Channel 1</Text>
    </TouchableOpacity>
    </View>
    )
  }
}

（我稍微简化了我的代码 - 希望我没有搞砸任何事情）

如果我在 StackNavigator 中传递参数，一切正常。虽然当我尝试通过 TabNavigator 传递标题时，我得到了这个错误：

Undefined in not an object (evaluating 'navigation.state.params.title')

我也试过 setParams- 我也没有让它在 TabNavigator 中工作。您对我有什么指点或建议吗？

Answer 1

这是因为第一次渲染时没有设置参数，所以你需要添加条件渲染来做到这一点，我试过你的代码，得到了这个解决方案，你可以尝试将你的 ChannelScreen 改成这样:

export default class ChannelScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params ? `${navigation.state.params.title}` : 'Default Title in Here',
  })

希望对你有所帮助，如有错误请指出我谢谢:)

React-Navigation: TabNavigator 中的动态标题。未定义不是 object

React-Navigation: Dynamic Title in TabNavigator. Undefined in not an object

react-native

react-navigation