gpt4 book ai didi

javascript - React Native 文本字符串必须在文本中呈现

转载 作者:行者123 更新时间:2023-12-02 18:13:31 27 4
gpt4 key购买 nike

您好,下面的 React Native 代码负责显示 ui,当我运行代码时出现以下错误?来我解决这个问题吗?它指示的文本已存在于组件文本中

错误: 文本字符串必须在文本组件内呈现。

react 代码:

 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;

最佳答案

   <View style={styles.circle}>
<Text style={styles.pinText}>{1}</Text>
</View>
</Marker>
))
: ''}

: ''} <= 这部分将被系统视为文本,但不会 <Text>标签,如果你不想返回任何内容,请使用 null

   <View style={styles.circle}>
<Text style={styles.pinText}>{1}</Text>
</View>
</Marker>
))
: null}

关于javascript - React Native 文本字符串必须在文本中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71950405/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com