在导航中使用 Mobx 存储 header

Question

//{Imports Here}

 const LoggedOut = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: { header: null }
  }
});

const LoggedIn = createStackNavigator({
  Home: {
    navigationOptions: ({ navigation}) => ({
      headerRight: (
        <View style={[styles.alternativeLayoutButtonContainer]}>
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("SelectFlag");
            }}
          >
            <Text
              style={[
                styles.awesomePhone,
                store.user.agent.calling
                  ? (style = { color: "#444" })
                  : (style = { color: "red" })
              ]}
            >
              &#xf095;
            </Text>
          </TouchableOpacity>

        </View>
      )
    }),

 SelectFlag: {
    screen: SelectFlag,
    navigationOptions: { header: null }
  }
  //{Other Screens here}
});



const App = ({ store }) =>
  store.user.isLoggedIn ? <LoggedIn /> : <LoggedOut />;

export default inject("store")(observer(App));

这是我的代码，我正在拼命尝试使用 Mobx 存储 (store.user.agent.calling) 中的一个值来检查是否有人在打电话。

我试过了：

//navigationOptions: ({ navigation, store}) => ({

并尝试以某种方式将其@inject 到 TouchableOpacity，但我运行没有办法修复它

...好吧，我尝试了不止两件事，但在我看来，这两件事似乎是最合乎逻辑的。

抱歉，这是一个愚蠢的问题，但我真的是 Mobx 的新手

Answer 1

好吧，我不再尝试以某种方式将它直接注入组件，而是像这样打包在一个单独的 class 中：

//{Imports here}

 @inject("store")
 export default class IncommingCall extends Component {
   render() {
     return (
       <View>
         <TouchableOpacity
           onPress={() => {
             navigation.navigate("SelectFlag");
           }}
         >
           <Text
             style={[
               styles.awesomePhone,
               !this.props.store.user.agent.calling
                 ? (style = { color: "#444" })
                 : (style = { color: "red" })
             ]}
           >
             &#xf095;
           </Text>
         </TouchableOpacity>
       </View>
     );
   }
 }

Answer 2

React 导航 api 自发布此问题后发生了一些变化，但是对于那些难以使 header 或 screenOptions 通常对 mobx 状态变化做出反应的人来说，关键是包装returns observer 中的堆栈导航器的组件。

然后将商店传递给例如从 parent NavigationContainer 到堆栈例如：

const MyStack = createStackNavigator();
const MyStackScreens = (store) => observer(() => (
  <MyStack.Navigator screenOptions={{ headerStyle: { height: store.height } }}>
    <MyStack.Screen
      name="..."
      component={...}
    />
  </MyStack.Navigator>
);

在导航中使用 Mobx 存储 header

use Mobx store in Navigation header

react-native

mobx

mobx-react

react-native-navigation