Question

在使用react-native进行编程时遇到了这个奇怪的错误。

这对我没有任何意义。我复制了＆＃34;首次设置＆＃34; （欢迎反应！得到......）本地反应并将其置于登录页面之后。我使用react-native-router-flux连接它们。

我没有从第一次设置中更改任何代码，我只是从另一个场景调用它。

当我没有直接更改＆＃34;首次设置时，我不明白错误是如何出现的。场景。

编辑：

显示scene2后出现错误。

连接两个场景的Rooter：

    import React from 'react';
    import { Scene, Router } from 'react-native-router-flux';
    import Scene2 from './components/Scene2';
    import LoginForm from './components/LoginForm';

    const RouterComponent = () => {
      return (
        <Router sceneStyle={{ paddingTop: 65 }} >

          <Scene key="auth">
            <Scene key="login" component={LoginForm} title="Please Login" />
          </Scene>

          <Scene key="main" style>
            <Scene
            key="ingredient"
            component={Scene2}
          //  hideNavBar={true}
            />
          </Scene>

        </Router>
      );
    };

export default RouterComponent;

场景1：

LoginScrenn

import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from './common';


class LoginForm extends Component {
  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onPasswordChange(text) {
    this.props.passwordChanged(text);
  }

 onButtonPress() {
   const { email, password } = this.props;

   this.props.loginUser({ email, password });
 }
  renderButton() {
    if (this.props.loading) {
      return <Spinner size="large" />;
    }

    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Confirm
      </Button>
    );
  }

  render() {
  return (
  <Card>
    <CardSection>
      <Input
        label="Email:"
        placeholder="email@gmail.com"
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
      />
    </CardSection>

    <CardSection>
      <Input
        secureTextEntry
        label="Passwort:"
        placeholder="*******"
        onChangeText={this.onPasswordChange.bind(this)}
        value={this.props.password}

      />
    </CardSection>

    <Text style={styles.errorTextStyle}>
      {this.props.error}
    </Text>
    <CardSection>
      {this.renderButton()}
    </CardSection>

      </Card>
    );
  }
}

const styles = {
  errorTextStyle: {
    fontSize: 20,
    alignSelf: 'center',
    color: 'red',
  }
};

const mapStateToProps = ({ auth }) => {
  const { email, password, error, loading } = auth;

  return { email, password, error, loading
  };
};

export default connect(mapStateToProps, {
   emailChanged, passwordChanged, loginUser
})(LoginForm);

场景2：我没有改变视图标签中的任何内容，但是当我进入显示代码的场景时，我得到了上面提到的错误。

 import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Scene2: extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

提前谢谢你，迈克尔

Answer 1

我认为你可能有额外的＆＃34;风格＆＃34;在代码的路由器部分。

你有......

<Scene key="main" style>

应该是

<Scene key="main">

React-Native：失败的道具类型：样式可能是假的但不是真的

1 个答案: