如何在本机反应中向视图添加动态宽度和颜色？

Posted 2023-02-16

【中文标题】如何在本机反应中向视图添加动态宽度和颜色？

【英文标题】：How to add dynamic width and color to a view in react native?

【发布时间】：2022-01-14 12:21:15

【问题描述】：

我正在尝试根据变量调整视图的宽度和颜色。我最初在应用程序中声明了似乎不起作用的变量。我也尝试过在函数范围之外声明变量但没有注册。无论如何我可以使用声明的变量动态编辑孩子的宽度吗？或者有什么功能可以让我做到这一点？

const app = () =>

const childWidth = 50;
const viewColor = 'red'

return(


<View style=styles.parent> 
 <View style=styles.child>CHILD</View>
</View>
)

styles = styleSheet.create(
 parent:
 width: 100,
 color: 'white',
 ,
 child:
 width: childWidth,
 color: viewColor,
 

)

提前致谢

【参考方案1】：

我假设您想动态编辑宽度，所以让我们使用 InputText 更改它。

首先让我们创建我们的 useState 钩子。

const myFunc = () =>
const [width , setWidth] = useState("50px")

return(
<>
<TextInput onChangeText=setWidth
        value=width />

//let's assume you want to change the width of this element.

<element style=width : width 

</>
)

导出默认值...

【参考方案2】：

我建议你可以在条件中使用样式

const app = () =>
    const isChildOneStyle = true
return(
  <View style=styles.parent> 
     <View style=isChildOneStyle ? styles.child1 : styles.child2>CHILD</View>
</View>
)

styles = styleSheet.create(
 parent:
 width: 100,
 color: 'white',
 ,
 child1:
 width: 50,
 color: 'red',
 ,
child2:
 width: 80,
 color: 'green',
 ,

)

or you can overrite style

const app = (customStyles) =>

return(
<View style=styles.parent> 
 <View style=[styles.child, customStyles]>CHILD</View>
</View>
)

或者如果你从 api 中获取了这个参数，你可以这样做

const app = (customWidth, customColor) =>

return(
<View style=styles.parent> 
 <View style=[styles.child,  width :customWidth , color: customColor ]>CHILD</View>
</View>
)

【讨论】：

我需要将变量设为宽度。这个 sn-p 来自更广泛的代码库，其中宽度变量是从 api 检索到的一段数据

我为您更正了示例：) 希望对您有所帮助

我看到你在 styles.child 中添加了方括号，并将宽度和颜色作为第二/第三样式参数。我已经尝试过，但似乎没有用。它下面有一条红色下划线：