【问题标题】:React Native flex and Layout issueReact Native flex 和 Layout 问题
【发布时间】:2019-11-14 02:41:56
【问题描述】:

我以前从未参与过应用程序开发项目,但是由于我们没有人可以进行一些更改,我的经理希望我进行这些调整,到目前为止,我在 stock-overflow 社区的帮助下取得了成功,但是有即使在网上搜索和观看 YouTube 视频时,我也无法掌握一些概念和代码行。

1- 有时视图或文本被分配了预定义的样式。 exp: style={styles.myAndroidStyle} 问题:我怎样才能保持这种风格并只收取一个参数,例如颜色?

我把我尝试过的所有选项都用粗体表示。

2-说到颜色,这两种分配颜色的方式有什么区别 颜色={Colors.myColorGold} 颜色:Colors.myColorGold

3- 同样的事情,这两种导航方式有什么区别 this.props.navigation.navigate('NotificationPreferences'); this.navigate('NotificationPreferences');

4- 我有这个带占位符的选择器,我尝试了所有方法来更改占位符的颜色,但没有成功,知道吗?

  const MyPicker = ({myOptions, handleChange, selectedID}) => {
    return Platform.OS === 'ios' ? (
        <RNPickerSelect
            placeholder={{label: 'Select an item', value: null, **placeholderTextColor: Colors.myColorGold**}}
            **placeholderTextColor={Colors.myColorGold}**
            items={itemOptions}
            onValueChange={handleChangeItem}
            style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, **Color: Colors.myColorGold**}}
            value={selectedItemID}
            **textColor={Colors.myColorGold}**
        />
    ) : (
        <Picker
            selectedValue={selectedItemID}
            style={styles.inputAndroid}
            onValueChange={handleChangeItem}
            **textColor={Colors.myColorGold}**
            **Color={Colors.myColorGold}**

        >
          <Picker.Item  label="Select a item" value="null" **textColor={Colors.myColorGold} Color={Colors.myColorGold}**/>
          {
            ItemOptions.map((item) => (
                <Picker.Item key={item.value} label={item.label} value={item.value} **textColor={Colors.myColorGold} Color={Colors.myColorGold}** />
            ))
          }
        </Picker>
    )
  }

  ItemPicker.propTypes = {
    ItemOptions: PropTypes.object,
    handleChangeItem: PropTypes.func,
    selectedItemID: PropTypes.number,
    **Color: Colors.myColorGold**,
    **placeholderTextColor: Colors.myColorGold**
  }

【问题讨论】:

    标签: react-native android-studio styles jsx picker


    【解决方案1】:

    这些问题似乎很简单。您可能不得不从官方文档中找到答案。

     1- style={styles.myAndroidStyle}
        //you can style your components as follows
      1==> style={{color:'black'}}//for component having one style
      2==> style={styles.myAndroidStyle}//where myAndroidStyle would have all the stylings
      3==> style={[style.myAndroidStyle,{color:'black}]}//where you can combine both the stylings
    

    2-color color={Colors.myColorGold} color: Colors.myColorGold
    在这种情况下我可能错了,但实际上它看起来像 color= 和 color: 是向 Colore.myColorGold 具有特定颜色的组件提供样式的方式。

    3-this.props.navigation.navigate('NotificationPreferences');
    实际上,这是导航到特定屏幕的正确方法。

        this.navigate('NotificationPreferences');
    //here it seems as navigate can be defined as follows:
    const navigate=this.props.navigation.navigate;
    or 
    navigate(screen)
    {
    return this.props.navigation.navigate(screen)}
    

    4- 我不认为选择器有任何类型的占位符,而是它只有文本,您可以按如下方式更改文本颜色。

     itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
    

    【讨论】:

    • style={style.myAndroidStyle,{color:'black}}//这里可以组合两种样式都行不行
    • 它终于奏效了,但我不得不改用这种格式style={[style.myAndroidStyle,{color:'black}]}
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-17
    • 2019-11-14
    • 1970-01-01
    • 1970-01-01
    • 2019-09-20
    • 1970-01-01
    相关资源
    最近更新 更多