Question

我在react-native上还很新，我正在开发一个使用socket.io在两个用户之间通信的应用程序

用户1向用户2发送à图片，该图片应显示在用户2屏幕上：每次用户1发送图片但里面什么都没有时，都会在屏幕上创建一个新的容器...

我使用base64格式将每个newPicture存储在数组newPictures []中。

这是用户2的代码。我在console.log（newPictures）上收到base64字符串，因此除图片渲染外，其他所有功能似乎都可以正常工作。

谢谢您的帮助！

export default class DashboardArtificial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPicture: "",
      newPictures: []
    };
   }

componentDidMount() {
this.socket.on("new picture", newP => {
  this.setState({ newPictures: [...this.state.newPictures, newP] });
  setTimeout(() => {
    this.setState({
      curTime: new Date().toLocaleString()
    })
  }, 1000);
});
}

render() {
 const newPictures = this.state.newPictures.map(newPicture => {
   console.log(newPicture);
    return (
     <Image
       style={styles.arrayPictures}
       key={newPicture}
       source={{uri: 'data:image/png;base64,{newPicture}'}}
      />
    )
  });

return (
  {newPictures}
  )

Answer 1

您要使用反勾号（而不是单引号）来执行此操作。反勾是ES6中模板文字的分隔符，模板文字可以包含作为函数传递的占位符，例如{newPicture}。

package com.example.dell.iwantto;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;
public class NameAdapter extends RecyclerView.Adapter<NameAdapter.NameViewHolder> {
    private ArrayList<String> mData;
    public static class NameViewHolder extends RecyclerView.ViewHolder {
        public TextView mNameTextView;
        public NameViewHolder(TextView v) {
            super(v);
            mNameTextView = v;
        }
    }
    public NameAdapter(ArrayList<String> mData) {
        this.mData = mData;
    }

    @Override
    public NameAdapter.NameViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        TextView v = (TextView) LayoutInflater.from(parent.getContext())
                .inflate(R.layout.layout,parent, false).findViewById(R.id.xs);
        NameViewHolder vh = new NameViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(NameViewHolder holder, int position) {
        holder.mNameTextView.setText(mData.get(position));
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }
}

如果您想了解有关反勾的更多信息，可以在这里进行： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

如何在React Native中显示来自数组的base64图像

1 个答案: