Question

这是我的React-Native类之一的片段-

#lockscreen.html
<form class="form-login" method="post">
           {% csrf_token %}
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Welcome Back {{request.session.name}}</h4>
              </div>
              <div class="modal-body">
                <p class="centered"><img class="img-circle" width="80" src="{% static 'img/ui-sam.jpg' %}"></p>
                <input type="password" name="password" placeholder="Password" autocomplete="off" class="form-control placeholder-no-fix">                                  
              </div>
              <div class="modal-footer centered">

                    <button data-dismiss="modal" class="btn btn-theme04" type="button">Cancel</button>
                    <a href="{% url 'polls:validationn' %} "><button class="btn btn-theme03" type="button" >Login</button></a>

              </div>

            </div>
          </div>
          </form>

#login.html
 <div id="login-page">
    <div class="container">
      <form class="form-login" method="post">
         {% csrf_token %}
        <h2 class="form-login-heading">sign in now</h2>
        <div class="login-wrap">
          <input type="text" name="username" class="form-control" placeholder="User ID">
          <br>
          <input type="password" name="password" class="form-control" placeholder="Password">
          <br>
           {% if messages %}
              <ul class="messages">
                {% for message in messages %}
                <font color="red"><li {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li></font>
                {% endfor %}
              </ul>
            {% endif %}

              <button class="btn btn-theme btn-block" type="submit" href=""><i class="fa fa-lock"></i> SIGN IN</button>          

          <hr>

      </form>
    </div>
  </div>

这是我的react-navigation route.js的摘录-

  class SignUp extends React.Component {

      static navigationOptions = ({navigation}) => {
        console.log('from header...');

        return {
          header: <SignUpHeader {...navigation.state.params} />,

          headerTransparent: true,
        };
      };

      constructor(props) {...}

      render(){....}

  export default withTheme(withNavigation(SignUp));

我有一个名为withAppContext的HOC-

const AuthStack = createStackNavigator(
  {

    SignUp: {
      screen:  SignUp,
    },

在这种情况下，如果我调试，则可以看到const withAppContext = Component => { return props => ( <AppContext.Consumer> {value => ( <Component {...props} value={value}> {props.children} </Component> )} </AppContext.Consumer> ); }; export {AppContext, withAppContext};正在从SignUp类中提到的navigationOptions中记录。

但是，如果我将更改文件包装到此-

'from header...'

然后不会打印控制台日志。因此，这意味着naviagationOptions没有被调用。

我可能会缺少什么？

请让我知道是否可以进一步解释？

Answer 1

最后，通过将navigationOptions从SignUp组件中移出并将其放入Route.js中，使它可以正常工作。

const AuthStack = createStackNavigator(
  {

    SignUp: {
      screen:   withAppContext(SignUp),
       navigationOptions : ({navigation}) => {

    return {
      header: <SignUpHeader {...navigation.state.params} />,

      headerTransparent: true,
    };
  },
    },
   ........

但是，我不能诚实地解释为什么早期的方法行不通。

react-native NavigationOptions标头未显示

1 个答案: