React native 导航后未调用React Native render（）

我有一个页脚组件，它共享给我的所有屏幕。它有一个更新当前属性并返回主页的方法

...
class FooterComp extends Component {
   changeProperty = async (data) => {
    await AsyncStorage.setItem('CurrentPropertyID', data.toString());

    await this.setState({ CurrentPropertyID: data.toString() });

    NavigationService.navigate('Home');
  }
}
...

我的导航服务：

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

我的App.js

class App extends Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <AppContainer
          ref={navigatorRef => {
            NavigationService.setTopLevelNavigator(navigatorRef);
          }}
        />
      </Provider>
    );
  }
}

export default App;

const MainStackNavigator = createStackNavigator({
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        headerTitle: 'iRent'
      }
    },
    Company: {
      screen: CompanyDetails,
      navigationOptions: {
        headerTitle: 'Company Details'
      }
    },
    Tenants: {
      screen: Tenants,
      navigationOptions: {
        headerTitle: 'Tenants'
      }
    },
    WorkOrders: {
      screen: WorkOrders,
      navigationOptions: {
        headerTitle: 'Work Orders'
      }
    },
    Applicants: {
      screen: Applicants,
      navigationOptions: {
        headerTitle: 'Applicants'
      }
    },
    Bills: {
      screen: Bills,
      navigationOptions: {
        headerTitle: 'Bills'
      }
    }
}, {
  defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Ionicons
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            name="md-menu"
            size={30}
          />
        )
      };
    }
});

const AppDrawerNavigator = createDrawerNavigator({
  iRent: {
    screen: MainStackNavigator
  },
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      drawerIcon: <FontAwesome name="home" size={20} />
    }
  },
  Company: {
    screen: CompanyDetails,
    navigationOptions: {
      drawerIcon: <FontAwesome name="building-o" size={20} />
    }
  },
  Tenants: {
    screen: TenantDetails,
    navigationOptions: {
      drawerIcon: <Ionicons name="ios-person" size={20} />
    }
  },
  Applicants: {
    screen: Applicants,
    navigationOptions: {
      drawerIcon: <MaterialCommunityIcons name="account-search" size={20} />
    }
  },
  WorkOrders: {
    screen: WorkOrders,
    navigationOptions: {
      title: 'Work Orders',
      drawerIcon: <Octicons name="checklist" size={20} />
    }
  },
  Bills: {
    screen: Bills,
    navigationOptions: {
      title: 'Bills',
      drawerIcon: <Entypo name="text-document" size={20} />
    }
  },
  LogOut: {
    screen: Login,
    navigationOptions: {
      title: 'Log Out',
      drawerIcon: <Entypo name="log-out" size={20} />
    }
  }
});

const AppSwitchNavigator = createSwitchNavigator({
  Login: { screen: Login },
  ForgotPassword: { screen: ForgotPassword },
  Main: { screen: AppDrawerNavigator },
  TenantDetails: { screen: TenantDetails },
  EditData: { screen: EditData },
  EditReview: { screen: EditReview },
  ApplicantDetails: { screen: ApplicantDetails },
  RunScreening: { screen: RunScreening },
  OpenBGReport: { screen: OpenBGReport },
  WorkOrderDetails: { screen: WorkOrderDetails },
  ConvertToTenant: { screen: ConvertToTenant },
  EditBill: { screen: EditBill },
  NoAccess: { screen: NoAccess },
});

const AppContainer = createAppContainer(AppSwitchNavigator);

类应用程序扩展组件{
render（）{
conststore=createStore（reducer，{}，applyMiddleware（ReduxThunk））；
返回(
{
NavigationService.setTopLevelNavigator（navigatorRef）；
}}
/>
);
}
}
导出默认应用程序；
const-MainStackNavigator=createStackNavigator({
主页：{
屏幕：主屏幕，
导航选项：{
标题：“艾伦特”
}
},
公司：{
屏幕：CompanyDetails，
导航选项：{
标题：“公司详细信息”
}
},
租户：{
屏幕：租户，
导航选项：{
标题：“租户”
}
},
工作顺序：{
屏幕：工作指令，
导航选项：{
标题：“工作指令”
}
},
申请人：{
屏幕：申请人，
导航选项：{
标题：“申请人”
}
},
法案：{
屏幕：账单，
导航选项：{
标题：“账单”
}
}
}, {
defaultNavigationOptions:（{navigation}）=>{
返回{
左校长：(
navigation.openDrawer（）}
name=“md菜单”
大小={30}
/>
)
};
}
});
const AppDrawerNavigator=createDrawerNavigator({
艾伦特：{
屏幕：MainStackNavigator
},
主页：{
屏幕：主屏幕，
导航选项：{
付款人：
}
},
公司：{
屏幕：CompanyDetails，
导航选项：{
付款人：
}
},
租户：{
屏幕：租户详细信息，
导航选项：{
付款人：
}
},
申请人：{
屏幕：申请人，
导航选项：{
付款人：
}
},
工作顺序：{
屏幕：工作指令，
导航选项：{
标题：“工作指令”，
付款人：
}
},
法案：{
屏幕：账单，
导航选项：{
标题：“法案”，
付款人：
}
},
注销：{
屏幕：登录，
导航选项：{
标题：“注销”，
付款人：
}
}
});
const AppSwitchNavigator=createSwitchNavigator({
登录：{屏幕：登录}，
ForgotPassword:{屏幕：ForgotPassword}，
Main:{screen:AppDrawerNavigator}，
租户详细信息：{屏幕：租户详细信息}，
EditData:{屏幕：EditData}，
EditReview:{屏幕：EditReview}，
应用程序详细信息：{屏幕：应用程序详细信息}，
运行筛选：{screen:RunScreening}，
OpenBGReport:{屏幕：OpenBGReport}，
WorkOrderDetails:{屏幕：WorkOrderDetails}，
ConvertToTenant:{屏幕：ConvertToTenant}，
EditBill:{屏幕：EditBill}，
NoAccess:{屏幕：NoAccess}，
});
const AppContainer=createAppContainer（AppSwitchNavigator）；

我的主屏幕

class HomeScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, title: 'Tenants', nav: 'Tenants', image: 'http://myirent.com/rent/appImg/tenants.jpg' },
        { id: 2, title: 'Applicants', nav: 'Applicants', image: 'http://myirent.com/rent/appImg/applicants.png' },
        { id: 3, title: 'Work Orders', nav: 'WorkOrders', image: 'http://myirent.com/rent/appImg/workOrders.png' },
        { id: 4, title: 'Bills', nav: 'Bills', image: 'http://myirent.com/rent/appImg/bills.png' }
      ],
      currentPropertyID: null
    };
  }

  componentDidMount = async () => {
    await AsyncStorage.getItem('CurrentPropertyID')
      .then((value) => {
        const propID = JSON.parse(value);
        this.setState({
          currentPropertyID: propID.toString()
        });
    });
  }

  render() {
      console.log('Render Main. PID: ' + this.state.currentPropertyID);
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.list}
          data={this.state.data}
          keyExtractor={(item) => {
            return item.id.toString();
          }}
          ItemSeparatorComponent={() => {
            return (
              <View style={styles.separator} />
            );
          }}
          renderItem={(post) => {
            const item = post.item;
            return (
              <TouchableOpacity
                onPress={() => { this.props.navigation.navigate(item.nav); }}
              >
                <View style={styles.card}>
                  <Image style={styles.cardImage} source={{ uri: item.image }} />
                  <View style={styles.cardContent}>
                    <View>
                      <Text style={styles.title}>{item.title}</Text>
                    </View>
                  </View>
                </View>
              </TouchableOpacity>
            );
          }}
        />
        <FooterComp />
      </View>
    );
  }
}

类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[
{id:1，标题：'租户'，导航：'租户'，图像：'http://myirent.com/rent/appImg/tenants.jpg' },
{id:2，标题：“申请人”，导航：“申请人”，图像：'http://myirent.com/rent/appImg/applicants.png' },
{id:3，标题：“工作指令”，导航：“工作指令”，图像：'http://myirent.com/rent/appImg/workOrders.png' },
{id:4，标题：'Bills'，导航：'Bills'，图像：'http://myirent.com/rent/appImg/bills.png' }
],
currentPropertyID:null
};
}
componentDidMount=async（）=>{
等待AsyncStorage.getItem（'CurrentPropertyID'）
。然后（（值）=>{
const propID=JSON.parse（值）；
这是我的国家({
currentPropertyID:propID.toString（）
});
});
}
render（）{
log（'Render Main.PID:'+this.state.currentPropertyID）；
返回(
{
return item.id.toString（）；
}}
ItemSeparatorComponent={（）=>{
返回(
);
}}
renderItem={（post）=>{
const item=post.item；
返回(
{this.props.navigation.navigate（item.nav）；}
>
{item.title}
);
}}
/>
);
}
}

---

奇怪的是，在FooterComp导航到“Home”之后，主屏幕组件的render（）方法中的console.log（）没有被调用。导航到组件后不应该渲染它吗？我需要调用render（）方法来更新屏幕。

未被调用，因为组件尚未更新。我的意思是，使用

react导航

屏幕不会卸载，只是会变得模糊

react导航中有一个可以帮助您解决此问题的功能，只需在视图中添加以下内容：

<View>
    <NavigationEvents
      onDidFocus={payload => console.log('Render Main. PID: ' + this.state.currentPropertyID)}
    />
    {/*
      Your view code
    */}
  </View>


console.log（'Render Main.PID:'+this.state.currentPropertyID）}
/>
{/*
您的视图代码
*/}
未被调用，因为组件尚未更新。我的意思是，使用
react导航
屏幕不会卸载，只是会变得模糊

react导航中有一个可以帮助您解决此问题的功能，只需在视图中添加以下内容：

<View>
    <NavigationEvents
      onDidFocus={payload => console.log('Render Main. PID: ' + this.state.currentPropertyID)}
    />
    {/*
      Your view code
    */}
  </View>


console.log（'Render Main.PID:'+this.state.currentPropertyID）}
/>
{/*
您的视图代码
*/}
问题是我需要更新组件。我的意思是，我需要主页来更新页脚选定的属性问题是我需要更新组件。我的意思是，我需要主页来更新页脚选定属性