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}) => ({

并尝试将其以某种方式@注入到TouchableOpacity中，但是我没有办法修复它

...好吧，我尝试了两件事以上，但在我看来，这两项是最合乎逻辑的合理选择。

对不起，这是一个愚蠢的问题，但是我真的对Mobx陌生

Answer 1

好吧，我停止尝试以某种方式直接将其注入到组件中，并且将其包装在这样一个单独的类中：

//{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>
     );
   }
 }

在导航标题中使用Mobx存储

1 个答案: