项目组件总结

1. 好看的边框

   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,
   

2. 展开和收起

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>

3. 循环部分

   constructor() {
   super();
   this.state = {
     XXX: [{},{},{}],
   }
   
   
   {this.state.XXX.map((item, key) => {
     return (
       
     );
   })}
   

4. 字体模板

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

5. 背景色半透明

   //只有背景透明
   backgroundColor: 'rgba(255,255,255,0.15)'
   
   //背景和里面的东西都透明
   backgroundColor: yellow; 
   opacity: 0.5;
   

6. 头像

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

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