标签页导航中的用户照片

Question

在一个react原生项目中，我试图将用户的个人资料照片设置为tabNavigation中的tabBarIcon。以下是我如何尝试检索照片路径并将其设置在TabBarIcon的源中。

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

constructor(props) {
super(props)
this.state = {
Access: []
}
}

我用getItem("Access")将我状态下的Access设置为AsyncStorage中的一个值，我知道它运行良好。

现在我有一个函数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/userprofilefoto.png"的内容

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

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

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}]}
/>
)
}