React Native 实战系列二

最新推荐文章于 2025-06-04 17:40:04 发布

原创最新推荐文章于 2025-06-04 17:40:04 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#RN

RN 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了React Native中的Flexbox布局属性如align-items和justify-content的作用及用法，并讲解了React Native组件的生命周期以及如何创建自定义组件。同时探讨了如何在组件中正确使用属性值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.自定义头部导航条

1.CSS 属性科普

align-items:

*The align-items property applies to all flex containers, and sets the default alignment of the flex items along the cross axis of each flex line.

*align-items属性适用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式。

*align-items和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

justifyContent：

*语法：justify-content: flex-start | flex-end | center | space-between | space-around

*flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
*flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
*center：弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
*space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
*space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

2.React Native组件生命周期：

componentWillMount:组件挂载之前

getInitialState:初始化

render:渲染

componentDidMount：渲染完毕，开始挂载

componentWillUnmount:组件被卸载之前

3.自定义Component

export default class CommonCell extends Component {


  constructor(props) {
    super(props);
    alert('constructor'+props.title);//这里可以获取到对应的值
    this.state = {
      title: props.title,
      isInfoVisible: props.isInfoVisible,
      info: props.info
    }
  }


  render() {
    return (
      this.renderCellView(this.props.title,this.props.info)//不知道这里这样传参数有没有问题
    );
  }

  /**
   * renderCellView
   * 渲染该条目
   * 该条目中，需要的参数
   * 1.标题(扫一扫 String)
   * 2.右边文字是否显示(1.94M boolean)
   * 3.右边文字取值(1.94M String)
   */
  renderCellView(title,info) {
    return (
      <TouchableOpacity onPress={() => { this.viewOnPressed() }} >
        <View style={styles.container}>
          <Text style={styles.leftTextStyle}>
         title---这里有问题
          </Text>
          <View style={styles.rightViewStyle}>
            <Text style={styles.rightTextStyle}>
             info---这里有问题
            </Text>
            <Image source={{ uri: 'icon_cell_rightarrow' }} style={styles.rightImgStyle} />
          </View>
        </View>
      </TouchableOpacity >
    )
  }
  /**
   * 条目点击事件
   */
  viewOnPressed() {
    alert('item---onpressed');
  };
}

const styles = StyleSheet.create({
  container: {
    borderBottomColor: '#dddddd',
    borderBottomWidth: 0.5,
    backgroundColor: 'white',
    flexDirection: 'row',
    height: 60,
    alignItems: 'center',
  },
  //右侧Image+Text
  rightViewStyle: {
    position: 'absolute',
    right: 30,
    flexDirection: 'row',
    alignItems: 'center',

  },
  leftTextStyle: {
    fontSize: 20,
    textAlign: 'center',
    marginLeft: 20,
  },
  rightTextStyle: {
    fontSize: 15,
    textAlign: 'center',
    marginRight: 20,
  },
  rightImgStyle: {
    position: 'relative',
    width: 8,
    height: 13
  },

})

使用方法如下：

 <CommonCell
            title='TestTitle'
            isInfoVisible='false'
            info='ceshiinfo'
          />

1.现在的有一个问题就是:在组件中可以以得到对应的属性值，但是不知道如何使用到组件中去，如果有明白的请致电

解答：React Native 中使用{}括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中

2.问题，如何根据传过来的参数，得到bool值，因为js是弱类型的，不知道传递参数的时候，如何赋值

解答：可以通过得到对应的属性值，然后比如可以通过“==”或者“===”来验证参数

3.如何在css中拿到当前组件的属性值，并使用？

4.如何在自定义Component的时候，传递某个函数，比如将点击事件传递过去，类似于Android中的接口回掉