反应本机语法错误“，”

Posted 2023-03-15

【中文标题】反应本机语法错误“，”

【英文标题】：React Native SyntaxError ","

【发布时间】：2020-03-14 19:39:12

【问题描述】：

接收语法错误，SyntaxError: Unexpected token，预期为“，”。倒数第三行");"

我无法看到需要插入“，”的位置。我在前面试过了）；之后。没运气。这是我在为 ios 添加谷歌登录代码的时候。将不胜感激任何帮助。

    render() 
        LayoutAnimation.easeInEaseOut();
        const scrollEnabled = this.state.screenHeight > height;
        return (this.state.logedin ?
            <View style=styles.container>
                <StatusBar barStyle="light-content"></StatusBar>
                <ScrollView
                    style= flex: 1 
                    contentContainerStyle=styles.scrollview
                    scrollEnabled=scrollEnabled
                    onContentSizeChange=this.onContentSizeChange
                >
                    <ImageBackground source=require("/Users/carloscraig/NoExcusasRN/screens/assets/grassbcg2.png")
                        style= width: '100%', height: '100%' >
                        <Image source=require("/Users/carloscraig/NoExcusasRN/screens/assets/noexlogo.png")
                            style=styles.logo>
                        </Image>

                        <Text style=styles.greeting>'BIENVENIDO!'</Text>

                        <View style=styles.errorMessage>
                            this.state.errorMessage && <Text style=styles.error>this.state.errorMessage</Text>
                        </View>

                        <View style=styles.form>
                            <View>
                                <Text style=styles.inputTitle>correo electrónico</Text>
                                <TextInput
                                    style=styles.input
                                    autoCapitalize="none"
                                    onChangeText=email => this.setState( email )
                                    value=this.state.email
                                ></TextInput>
                            </View>

                            <View style= marginTop: 32 >
                                <Text style=styles.inputTitle>contraseña</Text>
                                <TextInput
                                    style=styles.input
                                    secureTextEntry
                                    autoCapitalize="none"
                                    onChangeText=password => this.setState( password )
                                    value=this.state.password
                                ></TextInput>
                            </View>
                        </View>

                        <TouchableOpacity style=styles.button onPress=this.handleLogin>
                            <Text style= color: "#FFF", fontWeight: "500" >Iniciar Sesión</Text>
                        </TouchableOpacity>

                        <SafeAreaView style=
                            flex: 1,
                            justifyContent: 'center'
                        >
                            <Image style=
                                width: 300,
                                height:300,
                                justifyContent: 'center',
                                alignSelf: 'center'
                             source=uri: this.state.photo />
                            <Text>this.state.name</Text>
                            <Text>this.state.email</Text>
                            </SafeAreaView>:
                            <SafeAreaView style=
                                flex: 1,
                                justifyContent: 'center',
                                alignItems: 'center'
                            >
                            <GoogleSigninButton
                                style= width: 192, height: 48 
                                size=GoogleSigninButton.Size.Wide
                                color=GoogleSigninButton.Color.Light
                                onPress=this._signIn
                                disabled=this.state.isSigninInProgress />
                        </SafeAreaView>

                       <TouchableOpacity
                            style= alignSelf: "center", marginTop: 32 
                            onPress=() => this.props.navigation.navigate("Register")
                        >
                            <Text style= color: "#414959", fontSize: 13 >
                                No tienes una Cuenta? <Text style= fontWeight: "500", color: "#E9446A" >Regístrate</Text>
                            </Text>
                        </TouchableOpacity>
                    </ImageBackground>
                </ScrollView>
            </View>


        );
   

【问题讨论】：

在第 4 行，删除 ? 并放置 &&

好吧，错误消失了，由于某种原因，现在我的屏幕完全是白色的，它没有改变或任何东西，只是白色，这可能与那部分代码有关吗？

是的 this.state.logedin 返回错误。如果您想在false 上显示替代内容，请使用? : 而不是&&。

【参考方案1】：

反应conditional rendering

render() 
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      isLoggedIn
        ? <LogoutButton onClick=this.handleLogoutClick />
        : <LoginButton onClick=this.handleLoginClick />
      
    </div>
  );

您需要将另一半（假情况）添加到三元。在这种情况下，如果您不想渲染任何内容，则需要返回 null。

render() 
  LayoutAnimation.easeInEaseOut();
  const scrollEnabled = this.state.screenHeight > height;
  return (this.state.logedin ?
    <View style=styles.container>
      <StatusBar barStyle="light-content"></StatusBar>
      <ScrollView
        style= flex: 1 
        contentContainerStyle=styles.scrollview
        scrollEnabled=scrollEnabled
        onContentSizeChange=this.onContentSizeChange
      >
        <ImageBackground source=require("/Users/carloscraig/NoExcusasRN/screens/assets/grassbcg2.png")
          style= width: '100%', height: '100%' >
          <Image source=require("/Users/carloscraig/NoExcusasRN/screens/assets/noexlogo.png")
            style=styles.logo>
          </Image>

          <Text style=styles.greeting>'BIENVENIDO!'</Text>

          <View style=styles.errorMessage>
            this.state.errorMessage && <Text style=styles.error>this.state.errorMessage</Text>
          </View>

          <View style=styles.form>
            <View>
              <Text style=styles.inputTitle>correo electrónico</Text>
              <TextInput
                style=styles.input
                autoCapitalize="none"
                onChangeText=email => this.setState( email )
                value=this.state.email
              ></TextInput>
            </View>

            <View style= marginTop: 32 >
              <Text style=styles.inputTitle>contraseña</Text>
              <TextInput
                style=styles.input
                secureTextEntry
                autoCapitalize="none"
                onChangeText=password => this.setState( password )
                value=this.state.password
              ></TextInput>
            </View>
          </View>

          <TouchableOpacity style=styles.button onPress=this.handleLogin>
            <Text style= color: "#FFF", fontWeight: "500" >Iniciar Sesión</Text>
          </TouchableOpacity>

          <SafeAreaView style=
            flex: 1,
            justifyContent: 'center'
          >
            <Image style=
              width: 300,
              height: 300,
              justifyContent: 'center',
              alignSelf: 'center'
             source= uri: this.state.photo  />
            <Text>this.state.name</Text>
            <Text>this.state.email</Text>
          </SafeAreaView>:
                    <SafeAreaView style=
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
          >
            <GoogleSigninButton
              style= width: 192, height: 48 
              size=GoogleSigninButton.Size.Wide
              color=GoogleSigninButton.Color.Light
              onPress=this._signIn
              disabled=this.state.isSigninInProgress />
          </SafeAreaView>

          <TouchableOpacity
            style= alignSelf: "center", marginTop: 32 
            onPress=() => this.props.navigation.navigate("Register")
          >
            <Text style= color: "#414959", fontSize: 13 >
              No tienes una Cuenta? <Text style= fontWeight: "500", color: "#E9446A" >Regístrate</Text>
            </Text>
          </TouchableOpacity>
        </ImageBackground>
      </ScrollView>
    </View>
    : null);