项目组件总结

2021-02-08 22:01:58 阅读：109 来源： 互联网

标签：总结项目 color 23 grey state letterSpacing 组件 pxToDp

好看的边框

borderWidth: pxToDp(1),
borderStyle: 'dotted',
borderColor: 'white',
borderRadius: pxToDp(10),

//盒子阴影
shadowColor: '#000',
shadowOffset: { width: 4, height: 4 },
shadowOpacity: 0.8,
shadowRadius: 6,
elevation: 0.5,

展开和收起

class XXX extends Component {
  constructor() {
    super();
    this.state = {
      moreContent: 1,
      description:
        '几千年的漫漫征程，几百代的风云变幻，曾走过绿茵花溪，也踏过枯骨万里。一个世纪的近代史，刻满了血与泪的印记；七十年的上下求索，在挫折中迎来新生。只要民族的意志永远向前，无论历经多少艰难苦痛，我们的祖国依旧能披荆斩棘，砥砺前行！',
    }
  }
}
openContent = () => {
  this.setState({ moreContent: 0 });
};

closeContent = () => {
  this.setState({ moreContent: 1 });
};

showContent = () => {
  if (this.state.moreContent === 1) {
    return (
      <View>
        <Text
          numberOfLines={3}
          style={{
            color: 'grey',
            fontSize: pxToDp(23),
            letterSpacing: pxToDp(1),
          }}
        >
          {this.state.description}
        </Text>
        <Text
          onPress={() => this.openContent()}
          style={{
            color: 'grey',
            fontSize: pxToDp(23),
            letterSpacing: pxToDp(1),
            ...margin(550, 5, 0, 0),
          }}
        >
          【更多】
        </Text>
      </View>
    );
  } else {
    return (
      <View>
        <Text
          style={{
            color: 'grey',
            fontSize: pxToDp(23),
            letterSpacing: pxToDp(1),
          }}
        >
          {this.state.description}
        </Text>
        <Text
          onPress={() => this.closeContent()}
          style={{
            color: 'grey',
            fontSize: pxToDp(23),
            letterSpacing: pxToDp(1),
            ...margin(550, 5, 0, 0),
          }}
        >
          【收起】
        </Text>
      </View>
    );
  }
};


/*****/

<View
	style={{
	  borderWidth: pxToDp(1),
	  borderStyle: 'dotted',
	  borderColor: 'white',
	  borderRadius: pxToDp(10),
	  shadowColor: '#000',
	  shadowOffset: { width: 4, height: 4 },
	  shadowOpacity: 0.8,
	  shadowRadius: 6,
	  elevation: 0.5,
	  ...padding(5, 8, 5, 5),
	}}
>
	{this.showContent()}
</View>

循环部分

constructor() {
super();
this.state = {
  XXX: [{},{},{}],
}


{this.state.XXX.map((item, key) => {
  return (
    
  );
})}

字体模板

letterSpacing: pxToDp(2),
...fontStyle(29, 70, 70, '700', 'grey', 'left'),

背景色半透明

//只有背景透明
backgroundColor: 'rgba(255,255,255,0.15)'

//背景和里面的东西都透明
backgroundColor: yellow; 
opacity: 0.5;

头像

<Avatar
  image={{
    uri: XXX,
  }}
  size={70}
/>

标签：总结,项目,color,23,grey,state,letterSpacing,组件,pxToDp
来源： https://blog.csdn.net/AnitaSun/article/details/113760895

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

项目组件总结