Javascript - ReactNative 用户输入数组

Question

我对 React-Native 和 JavaScript 很陌生。我真的不知道如何开始这个小项目

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

你最喜欢什么宠物？

• 一只狗

• 一只猫

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

• 红色

• 绿色

根据他们的选择，将会出现一个图像(例如:一只红狗)。我真的不知道是否应该将答案存储在数组中以及如何加载问题？

Answer 1

任何react-native(以及就此而言的react)应用程序最重要的概念是组件的概念。

您想要的是创建一个组件“问题”，它可以通过 Prop 接收问题的标题及其可能的答案。这样你就可以避免在提出不同问题时重复代码。我将让您体验内部实现，使用复选框和标签搜索示例应该很容易。

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

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>
  )
}

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

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

为此，我在 App 组件中定义了状态，将 props 传递给了多个组件，并使用了一些已定义的 React Native 组件。您应该在 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>
  )
}

尝试尝试一下，看看它会给你带来什么以及你能学到什么!学习新技术最重要的部分就是尝试。

<小时/>

出于好奇，您是否使用 expo 来运行您的 React Native 应用程序？