关于本地反应的一般问题。道具和样式

Question

我的任务是对React本机应用程序进行一些调整。虽然这不是我的技能，但没有人可以从事此工作，因此我坚持使用它。在大多数情况下，我能够进行所需的编辑，但是如果有人可以帮助我更好地理解，我对代码的疑问很少。

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

Answer 1

对于1.如果使用的组件具有样式作为道具，则可以用作color={Colors.myColorGold}。就像在

中假设

<MaterialIcon color={Colors.myColorGold} />

并且如果要在styles对象中添加color属性，请执行以下操作：

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

2. 假设您要更改

   <Text style={styles.emphasized}> {alert.SensorType}</Text>只需转到其定义的styles.emphasized对象，并添加颜色或字体大小即可。例如

   强调：{红色'}

3. this.props.navigation.navigate('NotificationPreferences')与下一个相同。仅当您首先解构导航时，以上一项以显式和以下语法声明才有效。即const {navigate} = this.props.navigation;，然后使用下面的导航

this.navigate（'NotificationPreferences'）

4. 所以您必须应用如下样式

<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',
                },
              }}

请检查此链接：example

问我疑问。