时间戳

首页 > 解决方案 > 有关本机反应的一般问题。道具和风格

javascript - 有关本机反应的一般问题。道具和风格

问题描述

我的任务是对 react native 应用程序进行一些调整。虽然这不是我的技能，但没有人可以为此工作，所以我坚持下去。在大多数情况下，我能够进行所需的编辑，但是如果有人可以帮助我更好地理解，我对代码几乎没有疑问。

1 - 有什么区别

       color={Colors.myColorGold}
       color: Colors.myColorGold

2 - 如果我想使用预定义的样式但更改一个参数，如颜色或字体大小，我该如何在保留其余参数的同时做到这一点

<Text style={{ color: Colors.ochsnerGold, fontWeight: 'bold' }}>
      <Text style={styles.emphasized}>{alert.SensorType}</Text>

3 - 下面两者有什么区别

    this.props.navigation.navigate('NotificationPreferences');
    this.navigate('NotificationPreferences')

4 - 最后，我想改变占位符的颜色，我尝试了一切都没有成功，下面是代码和我尝试过的所有东西。

const ItemPicker = ({itemOptions, handleChangeitem, selectedItemID}) => {
  return Platform.OS === 'ios' ? (
      <RNPickerSelect
          placeholder={{label: 'Select an item', value: null, placeholderTextColor: Colors.myGold}}
          placeholderTextColor={Colors.myGold} //tried this
          items={itemOptions}
          onValueChange={handleChangeItem}
          style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, Color: Colors.myGold}} //tried this
          value={selectedItemID}
          textColor={Colors.myGold} //tried this
      />
  ) : (
      <Picker
          selectedValue={selectedItemID}
          style={styles.inputAndroid}
          onValueChange={handleChangeItem}
          textColor={Colors.myGold} //tried this
          Color={Colors.myGold} //tried this

      >
        <Picker.Item  label="Select a Item" value="null" textColor={Colors.myGold} Color={Colors.myGold}/> //tried this
        {
          itemOptions.map((item) => (
              <Picker.Item key={item.value} label={item.label} value={item.value} textColor={Colors.myGold} Color={Colors.myGold} /> //tried this
          ))
        }
      </Picker>
  )
}

标签： javascriptreact-nativestylesjsxreact-props

解决方案

对于 1. 如果您使用的组件具有样式作为其道具，那么您可以使用 as color={Colors.myColorGold}。就像假设在

<MaterialIcon color={Colors.myColorGold} />

如果您想在样式对象中添加颜色属性，请执行以下操作：

const proAppHeaderStyles=StyleSheet.create({
    hederStyle:{
        color:"#4f58ff",
      } 
})

  1. 假设你想改变

    <Text style={styles.emphasized}> {alert.SensorType}</Text> 只需转到定义了它的 styles.emphasized 对象，然后添加您想要更改的任何颜色或字体大小。例如

    强调：{颜色：'红色'}

3.this.props.navigation.navigate('NotificationPreferences')和下面的一样。只有当您首先解构导航时，上述一个明确和以下语法中的状态才会起作用。即 const {navigate} = this.props.navigation;，之后使用如下导航

this.navigate('NotificationPreferences')

  1. 所以你必须应用如下样式
<RNPickerSelect
              placeholder={{
                label: 'Select a number or add another...',
                value: null,
                color: 'red',
              }}
              items={this.state.numbers}
              onValueChange={value => {
                this.setState({
                  favNumber: value,
                });
              }}
              style={{
                ...pickerSelectStyles,
                iconContainer: {
                  top: 20,
                  right: 10,
                },
                placeholder: {
                  color: 'purple',
                  fontSize: 12,
                  fontWeight: 'bold',
                },
              }}
              value={this.state.favNumber}
              Icon={() => {
                return (
                  <View
                    style={{
                      backgroundColor: 'transparent',
                      borderTopWidth: 10,
                      borderTopColor: 'gray',
                      borderRightWidth: 10,
                      borderRightColor: 'transparent',
                      borderLeftWidth: 10,
                      borderLeftColor: 'transparent',
                      width: 0,
                      height: 0,
                    }}
                  />
                );
              }}
            />

所以基本上在样式对象内部，您需要传递占位符对象，然后是样式：

style={{
                ...pickerSelectStyles,
                iconContainer: {
                  top: 20,
                  right: 10,
                },
                placeholder: { // this is the part
                  color: 'purple',
                  fontSize: 12,
                  fontWeight: 'bold',
                },
              }}

请查看此链接：示例

问我疑问。

推荐阅读