react-native - 有没有办法在导航选项加载之前在屏幕中设置导航参数以响应本机 0.60

Question

我有一个编辑页面，当用户选择所需的颜色和图标时，单击屏幕标题上的保存按钮，此选定的颜色和图标保存在 Asyncstorage 上并返回主页。我将颜色和图标存储在编辑页面的状态中，并且我有一个名为 SaveChanges() 的函数，该函数将此颜色和图标保存在 Asyncstorage 上并返回到主页。我想在单击标题上的保存按钮时调用此函数。但是在 navigationOption:
1-我无法访问 this(as this page)
2-navigationOption 在componentDidMount 之前调用，所以componentDidMount 中的setParam 不会影响navigationOption。

componentDidMount() {

     this.props.navigation.setParams({ saveChanges: this.saveChanges });
   }

saveChanges=()=>{
     console.warn("in save changes");
     asyncstorage.SetinfoInAsyncstorage(this.props.lable,{issuer:this.state.issuerName,color:this.state.selectedColor,icon:this.state.selectedIcon}, (mymessage) =>
     {
        const resetAction = StackActions.reset({
          index: 0,
           actions: [NavigationActions.navigate({ routeName: 'AllAccountInfo',params:{allaccountmessage:mymessage} })],
          });
        this.props.navigation.dispatch(resetAction);



     });
   }

   static navigationOptions = ({ navigation }) => {
     return {
       headerRight: (
         <MaterialHeaderButtons>
           <Item buttonStyle={{color:'black'}}  title="save" iconName="save" onPress={()=>{
             navigation.getParam('saveChanges');
             }} />
         </MaterialHeaderButtons>

       ),
     };
   }; 

导航文档说我必须使用 redux。但我不想要 redux，因为它使我的应用程序变得复杂。
当我搜索时，标题的标题会动态变化，但我看不到 headerRight。

标签： react-native

Answer 1

在 componentDidMount 的 this.props.navigation.setParams 中，我设置了我需要在 headerRight 中显示的所有内容，而不仅仅是一个函数。

var that = this;
  this.props.navigation.setParams({ headerRight: 
  <MaterialHeaderButtons>
    <Item buttonStyle={{color:"white"}}  title="save" iconName="save" onPress={
      ////save color icon and application_name name in asyncstorage
      function(){
       asyncstorage.SetAccountinfoInAsyncstorage(that.user_id,{application_name:that.state.application_name,color:that.state.selectedColor,icon:that.state.selectedIcon}, (mymessage) =>
       {
          const resetAction = StackActions.reset({
            index: 0,
             actions: [NavigationActions.navigate({ routeName: 'AllAccountInfo' })],
            });
            that.props.navigation.dispatch(resetAction);



       });

      }} />
  </MaterialHeaderButtons>,
  primaryColor : this.props.theme.colors.primary,
  textColor:this.props.theme.colors.text,
  surfaceColor:this.props.theme.colors.surface,
  dark:this.props.theme.dark
  });