Question

我的JSON数据

机票价格：€8,00

但是，当我尝试运行此代码时，显示“＆euro;”而不是“€”符号

这是React本机代码

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ListView,
  Image,
  Alert,
  Button,
  Platform,
  Icon,
  ActivityIndicator,
  ImageBackground
} from "react-native";

import color from "./color.js";
import StringFile from "./StringFile.js";
export default class EventListing extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: "Event Listing",
      headerTitleStyle: {
    width: "90%",
    textAlign: "center"
      },
      headerStyle: {
    backgroundColor: color.actionbar_bgcolor
      },
      headerTintColor: color.actionbar_titlecolor
    };
  };
  componentDidMount() {
    this.props.navigation.setParams({
      Profile_redirect: this.Profile_redirect
    });
    return fetch("URL", {
      method: "POST",
      timeout: 30 * 1000
    })
      .then(response => response.json())
      .then(responseJson => {
    let ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.setState(
      {
        isLoading: false,
        dataSource: ds.cloneWithRows(responseJson.events)
      },
      function() {
        // In this block you can do something with new state.
        console.log("here= " + this.state.dataSource);
      }
    );
      })
      .catch(error => {
    console.error(error);
      });
  }
  constructor(props) {
    super(props);

    this.state = {
      email: "",
      password: "",
      isLoading: true
    };
    this.GetItem = this.GetItem.bind(this);
  }
  GetItem(flower_name, flower_Image) {
    const { navigate } = this.props.navigation;
    navigate("DetailScreen", {
      flowerName: flower_name,
      flowerImage: flower_Image
    });
    // alert(flower_name);
  }

  ListViewItemSeparator = () => {
    return (
      <View
 style={{
      height: 2,
      width: "100%",
      backgroundColor: "#fff"
    }}
      />
    );
  };
  render() {
    const { navigate } = this.props.navigation;
    const { navigation } = this.props;
    this.state.email = navigation.getParam("email", "NO-ID");
    this.state.password = navigation.getParam("password", "some default value");
    if (this.state.isLoading) {
      return (
    <View style={styles.container}>
      {/* <Text>{this.state.email}</Text>
      <Text>{this.state.password}</Text> */}

      <View style={{ flex: 1, justifyContent: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
    <ListView
      dataSource={this.state.dataSource}
      renderSeparator={this.ListViewItemSeparator}
      renderRow={rowData => (
        <TouchableOpacity
          onPress={this.GetItem.bind(
            this,
            rowData.event_name,
            rowData.background_image
          )}
        >
          <ImageBackground
            source={{
              uri: rowData.background_image
            }}
            resizeMode={"stretch"}
            style={styles.imageViewContainer}
            onError={({ nativeEvent: { error } }) => {
              console.log(rowData.event_name + " " + error);
            }}
          >
            <View
              style={{
                padding: 20,
                marginBottom: 10,
                position: "absolute",
                bottom: 0
              }}
            >
              <Text
                numberOfLines={1}
                style={{
                  color: "#fff",
                  fontWeight: "bold",
                  fontSize: 12
                }}
              >
                {rowData.event_name}
              </Text>

              <Text style={{ color: "#fff", fontSize: 10 }}>
                {rowData.event_type}
                {" | "}
                {rowData.event_datetime}
              </Text>

              <Text style={{ color: "#fff", fontSize: 10 }}>
                {rowData.event_place}
                {" | "}
                {rowData.ticket_prices}
              </Text>
            </View>
          </ImageBackground>
        </TouchableOpacity>
      )}
    />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  MainContainer: {
    justifyContent: "center",
    paddingTop: Platform.OS === "ios" ? 20 : 0
  },

  imageViewContainer: {
    width: "100%",
    height: 170,
    flex: 1,
    backgroundColor: "#000000"
  },

  textViewContainer: {
    textAlignVertical: "center",
    width: "50%",
    padding: 20
  }
});

Answer 1

好的，因此您在JSON中拥有€的HTML表示形式，即€

当您尝试输出{rowData.ticket_price}时，它实际上会返回{"€ 8.00"}

您可以尝试使用dangerouslySetInnerHTML：https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

在您的班级中定义以下内容：

renderHTML = (rawHTML) => React.createElement("div", { dangerouslySetInnerHTML: { __html: rawHTML } });

并像这样使用它：

this.renderHTML(rowData.ticket_prices)

此答案的积分：https://stackoverflow.com/a/42361869/6315852

但是但是您需要意识到此方法是危险的，因为它将您的解决方案公开给XSS

最安全的解决方案是用€替换字符串中的€：

let ticket_priceFormatted = rowData.ticket_prices.replace("&euro;", "€");

并显示ticket_priceFormatted而不是rowData.ticket_price

欧元符号未显示在文本组件React native中

1 个答案: