react-native - 欧元符号未显示在文本组件 React native 中
问题描述
我的 JSON 数据是这样的
门票价格:€ 8,00
但是,当我尝试运行此代码时显示“€” 而不是“€”符号
这里是反应原生代码
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
}
});
解决方案
推荐阅读
- javascript - 在 highcharts 中获取与特定类别相关的所有系列
- java - 在 java 7 中在运行时使用多个字段更改自定义注释实现
- azure-active-directory - “和”运算符在图形资源管理器中不起作用
- sql - 返回两个表在月份列中都有值的行
- python - HTTP POST Azure 中的授权标头 [错误代码 401]
- arrays - 由日文、ruby、yml、php 中的代码数组唯一键入的国家/地区调用代码
- php - 根据用户输入mysql列出特定月份的所有天
- c++ - C++ 中混合二进制/文本日志记录的最佳实践
- c# - DateTime.Parse 的 FormatException。检查我的日期字符串中的哪个部分有误
- mercurial - 推送后如何自动将远程 mercurial 存储库保持在提示状态