如何解决尝试在Android退出布局文件中加载React本机组件?
我在android上遇到一个问题,并对它的本机更改做出了反应。场景是,在react native中,我调用api来更新数据状态并显示以下视图(如果数据返回空数组然后隐藏视图)。问题是如果我检查空数组条件,那么它在react组件的react native页面上可以正常工作,但是使用相同的senario react native组件在android布局上不可见。但是,如果我删除条件检查,则它可以同时在android上运行并响应本机页面。
我在任何react本地组件上都观察到了这一点,每当我们在任何react组件上打开时,render方法都会被调用两次或三次。第一次使用状态声明的初始值在构造函数中进行渲染,然后在两个android上进行渲染并响应本机页面,然后我们在componentDidMount中进行状态更新,然后再次调用render方法,但这一次更新后的状态组件在React本机页面上贴上,但不是在android布局上。我相信这就是这里发生的事情,它需要初始值并在本机页面上呈现,但是当状态更新时,它不会在android布局中重新呈现,而是在本机页面上起作用。
因此,如果您对此有任何想法或解决方案,请告诉我,并随时提出与此问题有关的任何问题。
/*Attach this fragment in activity where you want to show this fragment
Add this in activity:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
Fragment fragment = StripFragment.newInstance("Q&A","1");
fragmentTransaction.add(R.id.includeLayout,fragment);
fragmentTransaction.commit();
Add this in activity xml file:
<include layout="@layout/fragmentStrip"
android:id="@+id/includeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
*/
public class StripFragment extends Fragment implements DefaultHardwareBackBtnHandler,ReactInstanceManager.ReactInstanceEventListener {
private static final String TAG = "StripFragment";
private static final String STRIP_MODULE_NAME = "moduleName";
private static final String STRIP_MODULE_TYPE = "moduleType";
public final String PAGE_TYPE = "PAGE_TYPE";
public final String PROPS_ParaM = "propsParam";
private ReactInstanceManager mReactInstanceManager;
private Context mContext;
private ReactContext mReactContext;
private ReactRootView mReactRootView;
private FrameLayout parent;
public static StripFragment newInstance(String moduleName,String moduleType) {
StripFragment fragment = new StripFragment();
Bundle args = new Bundle();
args.putString(STRIP_MODULE_NAME,moduleName);
args.putString(STRIP_MODULE_TYPE,moduleType);
fragment.setArguments(args);
return fragment;
}
@Override
public void onAttach(@NonNull Context context) {
super.onAttach(context);
mContext = context;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactInstanceManager = ReactInstanceSingleton.getReactInstanceManager(Objects.requireNonNull(getActivity()).getApplication());
if (mReactContext == null) {
mReactContext = mReactInstanceManager.getCurrentReactContext();
}
}
@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragmentStrip,container,false);
parent = view.findViewById(R.id.stripFrameLayout);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
String moduleName = null;
String moduleType = null;
JSONObject header_obj = new JSONObject();
JSONObject obj = new JSONObject();
if (getArguments() != null) {
moduleName = getArguments().getString(STRIP_MODULE_NAME,null);
moduleType = getArguments().getString(STRIP_MODULE_TYPE,null);
}
try {
if (moduleName != null && moduleType != null) {
obj.put("moduleName",moduleName);
obj.put("moduleType",moduleType);
}
} catch (JSONException e) {
e.printstacktrace();
}
final Bundle bundle = new Bundle();
bundle.putString(PAGE_TYPE,"MyStripFragment");
bundle.putString(PROPS_ParaM,obj.toString());
mReactRootView = new ReactRootView(Objects.requireNonNull(getActivity()).getApplicationContext());
parent.addView(mReactRootView);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
try {
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mReactRootView.getLayoutParams();
layoutParams.height = parent.getMeasuredHeight();
layoutParams.width = parent.getMeasuredWidth();
mReactRootView.setLayoutParams(layoutParams);
parent.invalidate();
mReactRootView.invalidate();
} catch (Exception e) {
e.printstacktrace();
}
}
},500);
try {
mReactRootView.startReactApplication(
mReactInstanceManager,"MyApplication",bundle
);
} catch (Exception e) {
e.printstacktrace();
}
}
@Override
public void onReactContextinitialized(ReactContext context) {
mReactContext = context;
}
@Override
public void invokeDefaultOnBackpressed() {}
@Override
public void onDestroy() {
super.onDestroy();
try {
if (mReactInstanceManager != null) {
mReactInstanceManager = null;
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
mReactRootView = null;
}
if (mReactContext != null) {
mReactContext = null;
}
if (parent != null) {
parent.removeAllViews();
parent = null;
}
} catch (Exception e) {
e.printstacktrace();
}
}
}
// XML布局文件fragmentStrip.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/stripFrameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/dimen8dp"
tools:context=".app.Application.StripFragment">
</FrameLayout>
//反应本机router.js文件
_setStripPropsData = () => {
let objStr = JSON.parse(this.props.propsParam);
let moduleType = objStr.moduleType ? objStr.moduleType : null;
let moduleName = objStr.moduleName ? objStr.moduleName : null;
return <MyComponent moduleType={moduleType} moduleName={moduleName} />;
};
if (this.props.PAGE_TYPE == "MyStripFragment") {
return this._setStripPropsData();
}
// MyComponent.js文件
export default class MyComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
data: [],};
}
// I'm updating data with api call and api is working fine
render(){
<View>
<Text>Text1</Text>
{this.state.data != undefined &&
this.state.data.length > 0 ?(
<Text>Text2</Text>
<FlatList
horizontal={true}
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item,index) => index.toString()}
/>
): null}
</View>
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)