javascript - React Native - 无法将状态变量传递给样式

Question

我的代码获取一个 json 文件，计算一个值，我想将此值传递给 TouchableOpacity 的样式。以下是我的尝试：

const [height, setHeight] = useState(0)
const [isLoading, setLoader] = useState(true)

const fetching = async () => {
    ...//code that fetches the value
    setHeight(value)
    setLoader(false)
} 

if (isLoading) {
    return (
        <Text> Loading...</Text>
    )
}

return (
    <View>
        <TouchableOpacity
              style={{height: height, width:30, backgroundColor: "red" }} />
         ... //other parts of the return statement 
    </View>

)

完整代码：

<View style={{height: height}}>
     <TouchableOpacity
          style={{width:30, borderWidth:5, marginTop:20, backgroundColor:"blue", height:height}}>
     </TouchableOpacity>
</View>

任何帮助，将不胜感激。

Answer 1

我认为你的 useState 很好。但是，要么父View级没有任何空间，要么 TouchableOpacity 没有可显示的内容。

你可以尝试这样做：

return (
    <View>
        <TouchableOpacity
              style={{height, width:30, borderWidth: 5 }} />
         ... //other parts of the return statement 
    </View>
)

如果你看不到边框，那么这是父母的问题View

然后你可以尝试：

return (
    <View style={{flex: 1}}>
        <TouchableOpacity
              style={{height, width:30, borderWidth: 5 }} />
         ... //other parts of the return statement 
    </View>
)

您还可以尝试将Text带有一些文本的组件添加到 TouchableOpacity。

这段代码：

import React, { useEffect, useState } from 'react';
import {Text, View, TouchableOpacity} from 'react-native';

export default function App() {
  const [height, setHeight] = useState(0)
  const [isLoading, setLoader] = useState(true)

  useEffect(() => {
    const timerTask = setInterval(() => {
      setHeight(Math.random() * 200)
      setLoader(false);
    }, 5000);
    return () => clearInterval(timerTask);
  }, [])

  if (isLoading) {
    return (
      <Text> Loading...</Text>
    )
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TouchableOpacity
        style={{width: 30, borderWidth: 5, marginTop: 20, backgroundColor: "blue", height}}>
      </TouchableOpacity>
    </View>
  )
}

产生一个可触摸的蓝色不透明度，每 5 秒改变一次高度。此外，当我触摸它时，它会变浅。

Answer 2

在我看来，您可能没有style在的渲染函数中传递属性TouchableOpacity，TouchableOpacity是您自己的自定义组件，不是吗？

const TouchableOpacity = ({ style }) => {
   ...

   return (
      <div style={style} >
         ...
      </div>
   );

}

Answer 3

Add a height and width to your element's style

height: 50,
width: '100%',
backgroundColor: "#000000"