反应本机语法错误“，”答案

【问题标题】：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 上显示替代内容，请使用? : 而不是&&。

标签： ios reactjs react-native visual-studio-code syntax-error

【解决方案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);
}

【讨论】：