反应导航：TabNavigator中的动态标题。未在对象中定义

我刚刚开始使用React Navigation和TabNavigator。反应导航：TabNavigator中的动态标题。未在对象中定义

我有2个选项卡：ChannelScreen & ListScreen。当我点击ListScreen中的一个通道时，ChannelScreen的标题应该被替换。

ChannelScreen：

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

ListScreen：

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 params，一切工作正常。虽然当我尝试通过TabNavigator的标题传递，我得到这个错误：

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

我也试过setParams - 我不明白这一点在TabNavigator工作，要么。你对我有什么建议吗？

来源

2017-08-04 Jonas

发生这种情况是因为参数没有从第一次渲染设置，因此您需要添加条件渲染来实现这一点，我已经尝试了您的代码并获得了此解决方案，您可以尝试将ChannelScreen更改为如下所示：

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

我希望它可以帮助你，如果你有一个错误谢谢:)

请通知我

来源

2017-08-04 14:08:38

反应导航：TabNavigator中的动态标题。未在对象中定义

回答

相关问题