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

Add a height and width to your element's style

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

Answer 2

我觉得你的 useState 没问题。然而，要么父级 View 没有任何 space，要么 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 3

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

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

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

}

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

React Native - unable to pass state variable into style

javascript

reactjs

react-native

react-native-stylesheet

use-state