Question

有没有办法将包含React Native的回调函数的复杂结构作为属性传递给本机iOS视图？例如。像这样的结构：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,800);

body {
  font-family: 'Open Sans';
  font-size: 1.5em;
  background: #eee;
}

.content {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  padding: 0 60px 0 0;
}

.centerplease {
  margin: 0 auto;
  max-width: 270px;
  font-size: 40px;
}

.question {
  position: relative;
  background: #8FBC8F;
  margin: 0;
  padding: 10px 10px 10px 50px;
  display: block;
  width:100%;
  cursor: pointer;
}

.answers {
  background: #999;
  padding: 0px 15px;
  margin: 5px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.questions:checked ~ .answers{
  height: auto;
  opacity: 1;
  padding: 15px;
}

.plus {
  position: absolute;
  margin-left: 10px;
  z-index: 5;
  font-size: 2em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.questions {
  display: none;
}

对于这样的结构，回调像空字典一样传递。

Answer 1

函数不可序列化，因此无法通过React Native桥传递。

本机UI组件可以有一个事件属性，它本质上是一个可以在本机端调用的块，并且将作为代表JS组件的回调道具接收。

例如：

//native property
@property (nonatomic, copy) RCTBubblingEventBlock onSomeEvent;

//native usage
if(self.onSomeEvent) {
    self.onSomeEvent(@{@"myParam": @"param_value"});
}

//JS side
<MyView onSomeEvent={params => console.log('got params', params)}/>

将具有从React Native回调的结构传递到本机视图

1 个答案: