Question

我有一个功能组件，我希望将导航标题更新为从数据存储中获取的数据。问题和博客很多，但是我什至无法将其更新为文字文字。

DataScreen.js

import React, {useEffect} from 'react';
import {
  Button
} from 'react-native';

const DataScreen: () => React$Node = (props) => {

  const { navigation } = props;

  // didnt work
  const updateTitle = () =>{
      console.log('trying to update title')
        navigation.setParams({
        Title: 'New Title', // tired title as well
    });
  }

  useEffect(() => {
    updateTitle();
  }, []);


  return (
    <>
    <Button title="New Title" onPress={updateTitle} />
    </>
  );
};


DataScreen.navigationOptions = {
    title: ' New Title',

  }

export default DataScreen;

如果在调用updateTitle之后执行console.log（导航），我会看到“新标题”。因此，我认为它已设置但未反映在用户界面中。

我的导航器对象：

createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
          title: 'Home',
        }),
      },
      Data: {
        screen: DataScreen,
        navigationOptions: ({navigation}) => ({
          title: 'Data'
        }),
      },
    },
    {
      initialRouteName: 'Home',
      headerMode: 'screen',
      mode: 'card'
    },
  );

Answer 1

有两种方法可以做到这一点

更新createStackNavigator以引用route.params.title中的标题（如果使用大写字母T，则为Title）

with open("asco.csv", 'w', newline = '') as file: #create file 
    writer = csv.writer(file)
    writer.writerow(["Name","Credentials"])

或

将setParams更改为setOptions（无需在createStackNavigator中进行任何更改）

createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
          title: navigation.state.params.title, // or Title if you use capital T
        }),
      },
      Data: {
        screen: DataScreen,
        navigationOptions: ({navigation}) => ({
          title: navigation.state.params.title
        }),
      },
    },
    {
      initialRouteName: 'Home',
      headerMode: 'screen',
      mode: 'card'
    },
  );

setParams不反映用户界面标题的更改

1 个答案: