我正在尝试使用此 API来显示星图以显示星图。 如果您查看超链接,则有两部分表示经度={number}&latitude={number}。 我决定从组件中获取用户经度和纬度,并相应地设置纬度和经度。 我得到了经度和纬度,但我无法将字符串连接起来(我现在将解释)

为了显示这个星图,我使用了组件。 我创建了一个名为 path 的变量,它是我的用户输入的纬度和经度的 API 链接,但只是不会更新。 我尝试打印出我的纬度和经度,它们是常规整数。 当我打印出路径时,它说经度 = [对象对象]&纬度 = [对象对象]。

我将发送我的代码、GitHub 存储库链接和控制台输出

GitHub 存储库:存储库链接

代码:const path就是你想看的那一行

import React from 'react'
import { View,Dimensions, Text, Platform, StatusBar, TouchableWithoutFeedback, KeyboardAvoidingView, StyleSheet, SafeAreaView, TextInput, Keyboard } from 'react-native'
import {Header} from 'react-native-elements'
import {WebView} from 'react-native-webview'

export default class StarMapScreen extends React.Component {
  constructor() {
    super()
    this.state = {
      longitude: 100,
      latitude: 0,
      //path: "https://virtualsky.lco.global/embed/index.html?longitude=0&latitude=0&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true"
    }
  }
  render() {
    const {longitude, latitude} = this.state
    console.log(longitude)
    console.log(latitude)
    const path = 'https://virtualsky.lco.global/embed/index.html?longitude='+{longitude}+'&latitude='+{latitude}+'&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true'
    console.log(path)
    return(
      <KeyboardAvoidingView behavior  = {Platform.OS === "ios" ? "padding" : "height"} style = {{flex:1,alignItems:'center'}}>
        
          
            <TouchableWithoutFeedback  onPress = {Keyboard.dismiss} accessible={false}>
              <View>
                <TextInput 
                  multiline = {true}
                  style = {styles.inputBox}
                  placeholder = "Latitude"
                  onChangeText = {text => {
                    this.setState({latitude:text})}}/>
              </View>
            </TouchableWithoutFeedback>
            
            <TouchableWithoutFeedback  onPress = {Keyboard.dismiss} accessible={false}>
              <View>
                <TextInput 
                  multiline = {true}
                  style = {styles.inputBox}
                  placeholder = "Longitude"
                  onChangeText = {text => {
                    this.setState({longitude:text})}}/>
              </View>
            </TouchableWithoutFeedback>
          
          <WebView 
            style={{marginTop:20, marginBottom:20, width:Dimensions.get('window').width}}
            //scalesPageToFit = {true}
            source={{ uri: path}}/>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  droidSafeArea: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  },
  inputView: {
    backgroundColor:"#480ca8",
    alignItems:'center',
    alignContent:'center',
    justifyContent:'center'
  },
  starText: {
    textAlign:'center',
    color:'white',
    fontWeight:'bold',
    fontSize:20
  },
  inputBox: {
    width:400,
    height:40,
    borderColor:'white',
    borderRadius:30,
    borderWidth:2,
    justifyContent:'center',
    textAlign:'center',
    color:'white',
    fontWeight:'bold',
    fontSize:20,
    marginTop:10
    
  }
})```

这是输出的console.logs

https://virtualsky.lco.global/embed/index.html?longitude${longitude}=&latitude${latitude}=&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
0
https://virtualsky.lco.global/embed/index.html?longitude=[object Object]&latitude=[object Object]&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
1
https://virtualsky.lco.global/embed/index.html?longitude=[object Object]&latitude=[object Object]&constellations=true&constellationlabels=true&showstarlabels=true&gridlines_az=true&live=true
100
12

  ask by Ryan Kim translate from so

本文未有回复,本站智能推荐:

1回复

如何在React Native中压缩字符串?

让我有一个包含20个字符的字符串。 然后,我需要将其压缩为长度为3或5个字符的字符串。 同样,当我需要原始字符串时,我应该能够解压缩压缩的字符串并获得原始字符串。 有可能吗? 如果是,如何在REACT NATIVE中执行此操作? 您能建议我一个好的解决方案吗? 谢谢。
2回复

将数组字符串转换为用于映射数据的数组

这是我的问题 我想将此字符串转换为数组,预期结果将是: 我用它来映射 React JS 项目中的数据,所以我需要将此字符串转换为数组。
1回复

如何在本机反应中将字符串转换为代码?

我正在尝试通过从数据库接收图像路径来从 React Native 打印图像。 但是,require() 不支持动态路径。 最初,数据库调用“/img/1.png”。 并使用这个 "require("../assets"+"/img/1.png")" 但没有用。 所以我将“require("../
2回复

在 React Native 中渲染逗号分隔的值字符串

我正在从 JSON 中提取 {item.dosage},它给了我以下字符串 我想在像这样的单独文本行中显示用逗号分隔的每种成分 我试图在我的 JSX 中执行以下操作 我收到一个关于“undefined is not a function...”的错误。
1回复

在 React 中一个字母一个字母地“打印”字符串

我有一个 React Native 组件,需要用一个字母一个字母一个字母地打印一个字符串的字母来显示一个动画。 因此,从逻辑上讲,我需要在循环中更新 React 状态挂钩,以 1 秒的间隔将字符串的每个字符附加到它。 到目前为止我所拥有的是: 以及带有状态钩子的 React 组件: 是的,我
1回复

React-Native,创建与i18n相关的动态字符串

我正在使用react-native-i18n开发多语言环境的应用程序。 在某些字符串中,我必须输入一个动态字符串,例如: var str = 'Hello dear '+ user.name +', good morning!' 我不想在语言json文件中定义两个参数(由于使我的代
1回复

如何在React Native中不使用字符串的情况下将width(100%)设置为与父级相同的宽度?

我正在尝试使cropWidth与父代的宽度相同,但是当我使用字符串时,出现此错误: unrecognized selector sent to instance 。 这是代码: 如果我使用整数,则错误消失,因此它可能仅接受那些整数。 有什么办法可以将字符串的宽度设置为与父母的宽度相同
3回复

字符串连接不起作用

这是我第一次发帖提问。 希望,我会保持活跃,因为编码是我喜欢的。 刚开始尝试使用Java。 得到这段代码: 我正在尝试阅读文本文件并将其打印在另一个地方。 这只是我写的大型程序的片段。 在这里,没有任何东西被连接到textData。 但是,文本有数据,证明我的文本文件正在
2回复

C#:字符串连接不起作用

今天,我遇到了一个前所未有的问题。 我正在尝试从Windows注册表中的值检查文件是否存在。 更具体地说,我从Flight Simulator获取安装路径,并检查是否安装了模块。 我得到的注册表项很好,它被转换为字符串(从一个对象),但是在它之后,我似乎无法连接文件名(之前是很好的)。
6回复

字符串连接不起作用,还是一个错误

我已经编写了一些代码,并使用了我用+ =组合而成的字符串(因为我只做过几次。 稍后,我使用了另一个字符串并使用了concat()函数。 串联不起作用。 所以我在Junit中写了一个小方法(带有Eclipse)... 输出是... 因此,要么我发疯,正在做错事(很可能