react 冲鸭!
1. 子组件 传递方法并带上参数
- 父组件单独写:
<div onClick={this.handleItemDelete.bind(this,index)}> </div>
- 父子组件写法
父组件:
constructor(props) {
super(props)
this.handleItemDelete = this.handleItemDelete.bind(this);
}
render() {
return (
<ListUI handleItemDelete = {this.handleItemDelete } />
)
handleItemDelete (index) {
console.log(index)
}
}
子组件:需要使用箭头函数,保证this指向的正确。
<div onClick = {()=> {this.props.handleItemDelete (index)}></div>
2. 设置虚线
直接设置某个方向上的虚线,在安卓机上是不生效的。兼容性处理: 虚线dashed属性
代码:
lineOne:{
width:25,
height:0,
borderWidth:0.8,
borderColor:'red',
borderStyle:'dashed',
borderRadius:0.1,
}
重点: borderRadius设置成0.1
3. input 输入在其他平台也能正常显示布局
在react-native 中的input框中输入的文字如果带有换行、空格,在Text 标签中是可以正常显示的,没啥问题。但是想在微信小程序中也显示这部分内容,则只是显示没有换行、没有空格的纯文本:
所以需要添加样式:
{ white-space: pre-wrap}
保留空白符序列,但是正常地进行换行。
4 . 页面中弹窗也需要滚动时
react-native 同一页面 有且只有一个地方可以实现滚动。
react-native 中 同一页面,有多个<ScrollView>
滚动时,会发现只能实现一个地方的滚动,这个时候需要通过禁用第一个<ScrollView>
的scrollEnabled
属性,启用第二个<ScrollView>
的滚动就能实现弹窗的滚动了。
5. 使用FlatList安卓机有时无法显示内容
给FlatList
设置一个高度。
6. 设置导航栏的点击事件
导航栏使用:
const {params = {} } = navigation.state;
const { setShareMenuRef = ()=>{}} = params;
定义:在组件创建时componentDidMount, 设置方法:
this.props.navigation.setParams({handleShareMenu: this.handleShareMenu})
handleShareMenu = () => {
console.log("handleShareMenu方法的定义事件")
}
7. 设置导航栏返回的文本
是在上一个页面设置该页面显示的返回文本内容。
8 . FlatList 滚动多次触发的问题
flatlist 在滚动的时候会触发两次
<FlatList
onEndReachedThreshold={0.2}
onEndReached={()=> {
// 延迟是为了确保开始滚动动作在前 能够顺利加载
setTimeout(()=>{
if (this.canAction) {
this.canAction = false
this.loadData() // 加载数据
}
},100)
}}
// 开始滚动时 只允许加载一次
onMomentumScrollBegin={() => {
this.canAction = true;
}}
/>