Javascript-本地用户输入数组

我对本地语言和javascript的反应非常陌生。我真的不知道如何开始这个小项目

用户可以为每个问题选择一个选项

你喜欢什么宠物

• 狗

• 猫

你希望你的宠物是什么颜色

• 红色的

• 绿色的

根据他们选择的内容，将出现一个图像（例如：一只红色的狗）。

---

我真的不知道我是否应该将答案存储在数组中，以及如何加载问题？

我希望您会喜欢学习Reactjs和Javascript世界。 首先，我注意到您已经标记了Reactjs和ReactNative。从语法上讲，它们几乎相同，但其中一个用于渲染到本机平台UI以在智能手机上显示为应用程序，另一个用于HTML DOM以在internet浏览器中显示

尽管如此，我还是在Reactjs中为您树立了一个榜样。现在React native不使用HTMLDOM（这是示例中呈现的内容），但是逻辑会有些相同

---

我希望您喜欢学习Reactjs和Javascript世界。 首先，我注意到您已经标记了Reactjs和ReactNative。从语法上讲，它们几乎相同，但其中一个用于渲染到本机平台UI以在智能手机上显示为应用程序，另一个用于HTML DOM以在internet浏览器中显示

尽管如此，我还是在Reactjs中为您树立了一个榜样。现在React native不使用HTMLDOM（这是示例中呈现的内容），但是逻辑会有些相同

---

任何react原生（以及react本身）应用程序最重要的概念是组件的概念

您需要的是制作一个组件“问题”，它可以通过道具接收问题的标题及其可能的答案。这样可以避免在提出不同问题时重复代码。我将让您使用内部实现，使用复选框和标签搜索示例应该足够简单

然后，从根组件（或要显示这些问题的组件）中，用相应的数据实例化其中两个问题。这看起来像：

const App = () => {
  return (
    <View>
      <Question
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
    </View>
  )
}

const-App=（）=>{
返回(
)
}

您还可以添加一个按钮，以便单击它可以显示相应的图像

最后，您需要的是在根组件中提供答案，以便您可以通过请求或以任何方式获得图像。在那之后，你只需要使用它

为此，我在应用程序组件中定义了状态，向几个组件传递了道具，并使用了一些已定义的react本机组件。您应该在react native的文档中阅读所有这些内容，这些文档相当不错

以下是一个例子：

const App = () => {
  const [state, setState] = useState({})
  const [image, setImage] = useState(null)

  // This is useful for changing this component's state from within the children
  const changeAnswer = ({question, answer}) => {
    setState({...state, question: answer})
  }

  const getImage = async () => {
    const { data } = await apiCall(state) // Or however you were going to get the image
    setImage(data.image)
  }

  return (
    <View>
      <Question
        changeAnswer={changeAnswer}
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        changeAnswer={changeAnswer}
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
      <Button
        title="Show image!"
        onPress={getImage}
      />
      {image && 
        <Image src={image} />
      }
    </View>
  )
}

const-App=（）=>{
const[state，setState]=useState（{}）
常量[image，setImage]=useState（null）
//这对于从子组件中更改此组件的状态非常有用
const changearse=（{问题，答案}）=>{
setState（{…状态，问题：答案}）
}
const getImage=async（）=>{
const{data}=await apiCall（state）//或者以任何方式获取图像
setImage（data.image）
}
返回(
{图像&&
}
)
}

试着去尝试，看看它能带给你什么，你能学到什么！学习新技术最重要的部分是实验

---

---

出于好奇，您是否正在使用expo来运行react-native应用程序？

任何react-native（以及react）应用程序最重要的概念是组件的概念

您需要的是制作一个组件“问题”，它可以通过道具接收问题的标题及其可能的答案。这样可以避免在提出不同问题时重复代码。我将让您使用内部实现，使用复选框和标签搜索示例应该足够简单

然后，从根组件（或要显示这些问题的组件）中，用相应的数据实例化其中两个问题。这看起来像：

const App = () => {
  return (
    <View>
      <Question
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
    </View>
  )
}

const-App=（）=>{
返回(
)
}

您还可以添加一个按钮，以便单击它可以显示相应的图像

最后，您需要的是在根组件中提供答案，以便您可以通过请求或以任何方式获得图像。在那之后，你只需要使用它

为此，我在应用程序组件中定义了状态，向几个组件传递了道具，并使用了一些已定义的react本机组件。您应该在react native的文档中阅读所有这些内容，这些文档相当不错

以下是一个例子：

const App = () => {
  const [state, setState] = useState({})
  const [image, setImage] = useState(null)

  // This is useful for changing this component's state from within the children
  const changeAnswer = ({question, answer}) => {
    setState({...state, question: answer})
  }

  const getImage = async () => {
    const { data } = await apiCall(state) // Or however you were going to get the image
    setImage(data.image)
  }

  return (
    <View>
      <Question
        changeAnswer={changeAnswer}
        title="What pet do you prefer?"
        answers=[
          "A dog",
          "A cat"
        ]
      />
      <Question
        changeAnswer={changeAnswer}
        title="What color do you want your pet to be?"
        answers=[
          "red",
          "green"
        ]
      />
      <Button
        title="Show image!"
        onPress={getImage}
      />
      {image && 
        <Image src={image} />
      }
    </View>
  )
}

const-App=（）=>{
const[state，setState]=useState（{}）
常量[image，setImage]=useState（null）
//这对于从子组件中更改此组件的状态非常有用
const changearse=（{问题，答案}）=>{
setState（{…状态，问题：答案}）
}
const getImage=async（）=>{
const{data}=await apiCall（state）//或者以任何方式获取图像
setImage（data.image）
}
返回(
{图像&&
}
)
}

试着去尝试，看看它能带给你什么，你能学到什么！学习新技术最重要的部分是实验

---

---

出于好奇，您是否正在使用expo运行react native应用程序？

谢谢您的回复！是的，我现在正在使用expo。我这样问是因为你可以用不同的模板创建一个项目，这样你就可以用它们学习很多很棒的概念哦，我明白了。我会四处看看，看能不能找到我们