Question

我刚开始使用React Navigation和TabNavigator。

我有两个标签：ChannelScreen＆amp; 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中的参数，一切正常。虽然当我尝试通过TabNavigator传递标题时，我收到此错误：

未在对象中定义（评估＆＃39; navigation.state.params.title＆＃39;）

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

Answer 1

发生这种情况是因为params不是从第一次渲染设置的，所以你需要添加条件渲染才能做到这一点，我已经尝试了你的代码，并且得到了这个解决方案，你可以尝试将你的ChannelScreen更改为： / p>

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中的动态标题。在对象

1 个答案: