Question

在本机反应项目中，我尝试将用户的个人资料照片设置为tabNavigation中的tabBarIcon。下面是我尝试检索照片路径并在TabBarIcon的源代码中设置它的方法。

首先我在AsyncStorage中有一个令牌，它在登录后为我提供用户名，电子邮件或电话号码（工作正常）。这是我的构造函数：

constructor(props) {
  super(props)

  this.state = {
    Access: []
  }

}

我将我的状态中的Access设置为我的AsyncStorage中的值，其中getItem（'Access'）我知道可以正常工作。

现在我有一个函数getProfilePhoto，我使用fetch来获取个人资料照片。

getProfilePhoto = () => {

  const { Access } = this.state.access;

  fetch('http://urltofiletogetprofilephoto', {
    method: 'POST',
    headers: {
      'Accept':'application/json',
      'Content-Type':'application/json',
    },
    body: JSON.stringify({
      Access:Access
    })
  }).then((response) => response.json())
    .then((responseJson) => {
      if(responseJson === 'NULL') {
        console.log('../Images/NoPhoto.png');
      } else {
        console.log('../' + responseJson);
      }
    })

}

我从该文件返回的内容是：

$profilephoto = $row['ProfilePhoto'];
$profilephotoJson = json_encode($profilephoto);
echo $profilephotoJson;

应返回类似“Images / userprofilephoto.png”的内容。现在在navigationOptions中我有这个：

static navigationOptions = {
    tabBarLabel: 'Profile',
    tabBarIcon: ({ tintColor }) => (
        <Image
            source = {this.getProfilePhoto}
            style={[styles.icon, {tintColor: tintColor}]}
        />
    )
}

我认为调用该函数会打印返回的Image路径，但是当我在设备上运行应用程序时，我没有收到错误，但我的tabBarIcon Image只是空白。我是新来的反应原生，并没有与Json合作，我希望有人能够看到我错过的错误！

Answer 1

试

source={require(this.getProfilePhoto())}

但是，您的函数getProfilePhoto未使用fetch返回路径。

navigationOptions也是静态的，因此this不可用。

您需要通过导航参数

访问它

static navigationOptions = ({ navigation }) => {
const { state } = navigation;
    return {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source = {state.params.getImage()}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        )
    }
}

componentWillMount() {
    this.props.navigation.setParams({
      getImage: () => {
        this.getProfilePhoto();
      },
    });
  }

getProfilePhoto () => {
    //here you can get the path from this.props which would be added
    //as before the component mounts
    return this.props.profileImagePath;  //set from redux connect
}

这样做的一个缺点是，如果您想要动态更新图像，则需要再次调用setParams以强制它重新渲染选项卡。

 componentWillReceiveProps(nextProps) {
   this.props.navigation.setParams({
      getImage: () => {
        this.getProfilePhoto();
      },
    });
 }

我可以将图像与组件分开，并使用Redux连接到最新的图像路径。因此，您可以设置从另一个组件触发的Redux存储。

Answer 2

通过在setState挂钩中添加数据提取请求解决您的承诺时，您可能需要comoponentWillMount，并确保您的图片位于相对于您的组件的生成位置。

class UserProfile extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      Access: []
      image: null
    }

  }

  componentWillMount() {
    this.getProfilePhoto();
  }

  getProfilePhoto = () => {

    const { Access } = this.state.access;

    fetch('http://urltofiletogetprofilephoto', {
      method: 'POST',
      headers: {
        'Accept':'application/json',
        'Content-Type':'application/json',
      },
      body: JSON.stringify({
        Access:Access
      })
    }).then((response) => response.json())
      .then((responseJson) => {
        if(responseJson === 'NULL') { 
          console.log("../Images/NoPhoto.png");
        } else {
          this.setState({image: responseJson})
        }
      })

  }

  render() {
    return (
       this.state.image
         ?
         <Image
           source={require(this.state.image)}
           style={this.props.style}
         />
         : 
         null
    )        
  } 
}


static navigationOptions = {
    tabBarLabel: 'Profile',
    tabBarIcon: ({ tintColor }) => (
        <UserProfile
            style={[styles.icon, {tintColor: tintColor}]}
        />
    )
}

标签导航中的用户照片

2 个答案: