rn图片显示错乱

Posted 2023-05-17

RN上在低内存发送大量图片的时候,会显示图片异常;如在聊天页面中发送上百个表情,会显示异常。如图、 解决方案:将Image的加载渲染方式修改为: resizeMode="cover" 设置cover模式时,一定要将图片的宽和高都设置为相等,否则会显示异常(宽高比多出的部分无法显示)。另外图片不要有太多的透明外边框,一是占用内存空间大小,另外也有可能会造成异常。 图片不是非常变态的多时,大部分还是使用contain模式。 resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。 cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。 contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白 stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。 repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。 center: 居中不拉伸。 参考技术A 可能是由，Flatlist组件渲染机制导致，props在全等比较中没有变化，所以组件不会更新数据

RadioGroup嵌套RadioButton 条目显示错乱解决方法

最近在使用ListView中发现在使用，item含RadioGroup嵌套RadioButton时会出现条目显示错乱的问题。 

 

1.　　首先想到的是通过bean类，存放RadioButton的状态。保证每一个条目对应集合里面的一条数据。但是修改之后，在下划之后，在上划。还是会显示错乱

　　   　　这可咋整？

　　　按理来说一般条目错乱，只要将变化的数据记录到bean中都没问题（如典型的点赞功能）。 那这里为什么还会出问题呢？

　　　　  结合网上的一些资料，最后得出的结论是RadioGroup的状态------其实控件本身已经进行了监听。 如果没有修改这个监听动作，那么当状态改变的时候

　　　　  是会调用到系统默认的监听中。 所以在设置数据时需要先移除掉系统这个默认的监听，在设置完数据后，在加上自己的事件监听。这样在滑动过程中

　　　　  条目是会先加载数据，在监听事件的改变。

 

2　　接下来看下代码的实现过程：

　(1)　 

if (getItem(i).isChecked()){
    RadioButton radioButton = (RadioButton) rg_test.getChildAt(getItem(i).getIndex());
    radioButton.setChecked(true);
}else {
    //重点是这里 ---  需要清空RadioGroup中的check状态
    rg_test.clearCheck();
}

 

    (2)

rg_test = view.findViewById(R.id.rg_test);
// 精髓-- 一定要先将RadioGroup中的监听事件设置为null，在设置初始化，最后在设置自己的监听事件.  原因是RadioGroup本身会监听这个事件和
//          你设不设定回调没什么关系。 如果你不设置未null，在初始化的过程中会调用系统的回调。导致错乱！！！！
rg_test.setOnCheckedChangeListener(null);

public class MainActivity extends AppCompatActivity {

    private BeanTest beanTest;
    private TextView tv_title;
    private RadioGroup rg_test;
    private RadioButton rb_1;
    private RadioButton rb_2;
    private RadioButton rb_3;
    private RadioButton rb_4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView lv = findViewById(R.id.lv);
        List<BeanTest> list=new ArrayList<BeanTest>();
        initlist(list);


        lv.setAdapter(new MyAdapter(list));


    }

    private List<BeanTest> initlist(List<BeanTest> list) {
      for (int i=0;i<50;i++){
          beanTest = new BeanTest("题目"+i+":","选项--^_^--1","选项--^_^--2","选项--^_^--3","选项--^_^--4",false);
          list.add(beanTest);
         // beanTest.setTitle("");

      }

        return list;
    }

    private class MyAdapter extends BaseAdapter{
        private  List<BeanTest> list=null;


        public MyAdapter(List list) {
            this.list=list;
        }

        @Override
        public int getCount() {
            return list!=null? list.size():0;
        }

        @Override
        public BeanTest getItem(int i) {
            return list.get(i);
        }

        @Override
        public long getItemId(int i) {
            return i;
        }

        @Override
        public View getView(final int i, View view, ViewGroup viewGroup) {
            if (view==null){
                view= View.inflate(MainActivity.this, R.layout.item_test, null);

            }
            rg_test = view.findViewById(R.id.rg_test);
            // 精髓-- 一定要先将RadioGroup中的监听事件设置为null，在设置初始化，最后在设置自己的监听事件.  原因是RadioGroup本身会监听这个事件和
            //          你设不设定回调没什么关系。 如果你不设置未null，在初始化的过程中会调用系统的回调。导致错乱！！！！
            rg_test.setOnCheckedChangeListener(null);

            tv_title = view.findViewById(R.id.tv_title);
            tv_title.setText(list.get(i).getTitle());

            rb_1 = view.findViewById(R.id.rb_1);
            rb_1.setText(getItem(i).getContent_1());

            rb_2 = view.findViewById(R.id.rb_2);
            rb_2.setText(getItem(i).getContent_2());

            rb_3 = view.findViewById(R.id.rb_3);
            rb_3.setText(getItem(i).getContent_3());

            rb_4 = view.findViewById(R.id.rb_4);
            rb_4.setText(getItem(i).getContent_4());

            if (getItem(i).isChecked()){
                RadioButton radioButton = (RadioButton) rg_test.getChildAt(getItem(i).getIndex());
                radioButton.setChecked(true);
            }else {
                //重点是这里 ---  需要清空RadioGroup中的check状态
                rg_test.clearCheck();
            }


            rg_test.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(RadioGroup radioGroup, int x) {
                    Log.e("gzm","gzm----"+x);
                    switch (x){
                        case R.id.rb_1:
                            getItem(i).setIndex(0);
                            getItem(i).setChecked(true);
                            break;
                        case R.id.rb_2:
                            getItem(i).setIndex(1);
                            getItem(i).setChecked(true);
                            break;
                        case R.id.rb_3:
                            getItem(i).setIndex(2);
                            getItem(i).setChecked(true);
                            break;
                        case R.id.rb_4:
                            getItem(i).setIndex(3);
                            getItem(i).setChecked(true);
                            break;
                        default:
                            break;
                    }
                }
            });
            return view;
        }
    }
}

 

 public  class BeanTest {
    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public BeanTest(String title) {
        this.title = title;
    }


    public BeanTest(String title, String content_1, String content_2, String content_3, String content_4,boolean isChecked) {
        this.title = title;
        this.content_1 = content_1;
        this.content_2 = content_2;
        this.content_3 = content_3;
        this.content_4 = content_4;
        this.isChecked=isChecked;
    }

    String title;

    public String getContent_1() {
        return content_1;
    }

    public void setContent_1(String content_1) {
        this.content_1 = content_1;
    }

    public String getContent_2() {
        return content_2;
    }

    public void setContent_2(String content_2) {
        this.content_2 = content_2;
    }

    public String getContent_3() {
        return content_3;
    }

    public void setContent_3(String content_3) {
        this.content_3 = content_3;
    }

    public String getContent_4() {
        return content_4;
    }

    public void setContent_4(String content_4) {
        this.content_4 = content_4;
    }

    String content_1;
    String content_2;
    String content_3;
    String content_4;

    public int getIndex() {
        return index;
    }

    public void setIndex(int index) {
        this.index = index;
    }

    public boolean isChecked() {
        return isChecked;
    }

    public void setChecked(boolean checked) {
        isChecked = checked;
    }

    int index;
   private boolean isChecked;

}

 

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:text="测试标题"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <RadioGroup
        android:id="@+id/rg_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RadioButton
            android:id="@+id/rb_1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

        <RadioButton
            android:id="@+id/rb_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/rb_4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </RadioGroup>


</LinearLayout>

 

 

 

实现效果：测试后发现可以解决条目错乱问题.