您好，下面的反應本機代碼負責顯示 ui，當我運行代碼時出現以下錯誤？我來解決這個？它指示的文本已經存在于組件文本中
錯誤： text strings must be rendered within a text component.
反應代碼：
import * as React from 'react';
import PropTypes from 'prop-types';
import {
StyleSheet,
View,
Text,
Image,
TouchableHighlight
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import * as Location from 'expo-location';
import MapView, { Marker } from 'react-native-maps';
import { colors, device, fonts, gStyle } from '../constants';
import RequestRideType from '../components/RequestRideType';
import SelectRideType from '../components/SelectRideType';
import TouchIcon from '../components/TouchIcon';
import TouchText from '../components/TouchText';
import WhereTo from '../components/WhereTo';
import SvgCheckShield from '../components/icons/Svg.CheckShield';
import SvgMenu from '../components/icons/Svg.Menu';
import SvgQRCode from '../components/icons/Svg.QRCode';
import { getlist } from '../services/event';
const { PROVIDER_GOOGLE } = MapView;
export const types = {
car: {
image: 'carSm',
imageLg: 'carLg',
text: 'Soccer'
},
bike: {
image: 'bikeSm',
imageLg: 'bikeLg',
text: 'Basket'
},
golf: {
image: 'golfSm',
imageLg: 'golfLg',
text: 'Golf'
},
baseball: {
image: 'golfSm',
imageLg: 'golfLg',
text: 'Baseball'
}
};
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
type: 'car',
selectType: false,
showMap: false,
userLat: null,
userLon: null,
events: []
};
this.toggleTypeModal = this.toggleTypeModal.bind(this);
this.changeRideType = this.changeRideType.bind(this);
}
async loadvalues() {
// get list of events
const eventlist = await getlist();
this.setState({
events: eventlist
});
}
async componentDidMount() {
this.loadvalues();
// Verifico se sono abilitati i permessi di geolocalizzazione
const { status: existingStatus } =
await Location.requestForegroundPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== 'granted') {
const { status } = await Location.requestForegroundPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== 'granted') {
return;
}
const { coords } = await Location.getCurrentPositionAsync();
this.setState({
showMap: true,
userLat: coords.latitude,
userLon: coords.longitude
});
}
toggleTypeModal() {
this.setState((prevState) => ({
selectType: !prevState.selectType
}));
}
changeRideType(type) {
this.setState({
type
});
}
render() {
const { navigation } = this.props;
const { type, selectType, showMap, userLat, userLon, events } = this.state;
return (
<View style={gStyle.container}>
{showMap && (
<React.Fragment>
<MapView
followsUserLocation
minZoomLevel={4}
provider={PROVIDER_GOOGLE}
region={{
latitude: userLat,
longitude: userLon,
latitudeDelta: 0.01,
longitudeDelta: 0.01
}}
showsUserLocation
style={styles.map}
>
{events.length > 0
? this.state.events.map((object) => (
<Marker
key={Math.random()}
coordinate={{
latitude: object.latitudine,
longitude: object.longitudine
}}
>
<View style={styles.circle}>
<Text style={styles.pinText}>{1}</Text>
</View>
</Marker>
))
: ''}
</MapView>
</React.Fragment>
)}
{!showMap && (
<View style={styles.containerNoLocation}>
<Text style={styles.textLocationNeeded}>Search Fit Event...</Text>
<TouchText
// eslint-disable-next-line no-undef
onPress={() => Linking.openURL('app-settings:')}
style={styles.btnGoTo}
styleText={styles.btnGoToText}
text="Go To Permissions"
/>
</View>
)}
{type === 'bike' && (
<View style={styles.rightContainer}>
<View style={styles.icon}>
<TouchIcon
icon={<SvgQRCode />}
iconSize={20}
onPress={() => navigation.navigate('ModalQRCode')}
style={[styles.icon, styles.iconQRCode]}
/>
<TouchIcon
icon={<SvgCheckShield />}
iconSize={20}
onPress={() => navigation.navigate('ModalTutorialBike')}
style={[styles.icon, styles.iconShield]}
/>
</View>
</View>
)}
<View style={styles.header}>
<TouchIcon
icon={<SvgMenu />}
iconSize={32}
onPress={() => navigation.toggleDrawer()}
/>
<RequestRideType
image={types[type].image}
onPress={this.toggleTypeModal}
text={types[type].text}
/>
{type === 'car' && <View style={styles.placeholder} />}
{type === 'bike' && (
<TouchText
onPress={() => navigation.navigate('ModalHelp')}
style={styles.help}
text="Info"
/>
)}
</View>
<SelectRideType
data={types}
onClose={this.toggleTypeModal}
onSelect={this.changeRideType}
visible={selectType}
/>
<WhereTo />
<View style={styles.mainConatinerStyle} />
<TouchableHighlight onPress={() => Actions.addactivity()}>
<Image
onPress={() => Actions.addactivity()}
style={styles.image}
source={require('../assets/images/add.png')}
/>
</TouchableHighlight>
</View>
);
}
}
Home.propTypes = {
navigation: PropTypes.object.isRequired
};
const styles = StyleSheet.create({
mainConatinerStyle: {
flexDirection: 'row',
flex: 1
},
image: {
display: 'flex',
flexDirection: 'row',
height: 50,
justifyContent: 'space-between',
marginBottom: 10,
marginLeft: 30,
width: 50
},
floatingMenuButtonStyle: {
alignSelf: 'flex-end',
bottom: 35,
position: 'absolute'
},
circle: {
backgroundColor: 'red',
borderRadius: 30 / 2,
height: 30,
width: 30
},
pinText: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
textAlign: 'center'
},
map: {
flex: 1,
height: device.height,
position: 'absolute',
width: device.width
},
containerNoLocation: {
alignItems: 'center',
height: device.height,
justifyContent: 'center',
position: 'absolute',
width: device.width
},
textLocationNeeded: {
fontFamily: fonts.uberMedium,
fontSize: 16,
marginBottom: 16
},
btnGoTo: {
backgroundColor: colors.black,
borderRadius: 3,
paddingHorizontal: 16,
paddingVertical: 8
},
btnGoToText: {
color: colors.white,
fontFamily: fonts.uberMedium,
fontSize: 16
},
header: {
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
paddingHorizontal: 20,
paddingTop: device.iPhoneX ? 58 : 34
},
help: {
textAlign: 'center',
width: 32
},
placeholder: {
height: 32,
width: 32
},
rightContainer: {
alignItems: 'center',
height: '100%',
justifyContent: 'center',
position: 'absolute',
right: 16,
width: 40
},
icon: {
borderRadius: 18,
height: 36,
shadowColor: colors.black,
shadowOffset: { height: 2, width: 0 },
shadowOpacity: 0.2,
shadowRadius: 8,
width: 36
},
iconQRCode: {
backgroundColor: colors.blue,
marginBottom: 16
},
iconShield: {
backgroundColor: colors.white
}
});
export default Home;
uj5u.com熱心網友回復：
<View style={styles.circle}>
<Text style={styles.pinText}>{1}</Text>
</View>
</Marker>
))
: ''}
: ''} <= 這部分將被系統視為文本，但沒有標簽，如果您不想回傳任何內容，請使用 null 代替
<View style={styles.circle}>
<Text style={styles.pinText}>{1}</Text>
</View>
</Marker>
))
: null}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/460025.html
標籤：javascript 反应 反应式