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

2024-05-02 • 问答

我的任务是对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>
  )
}

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

<MaterialIcon color={Colors.myColorGold} />

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

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

假设您要更改

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

强调：{ 红色' }

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

this.navigate（'NotificationPreferences'）

因此，您必须应用以下样式

<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,placeholder: { // this is the part
                  color: 'purple',}}

请检查此链接：example

让我怀疑。

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

xiaoxi8892 回答：有关本地反应的一般问题。道具和风格

大家都在问