javascript - 要求与道具不起作用。“呼叫无效……”

Question

我不明白为什么这段代码不起作用。

const UserCard = props => {
    return (
      <View style={styles.card}>
          <View style={{flex: 0.33}}>
            <Image source={require(props.user.image)} style={{width: 100, height: 100}}/>
          </View>
          <View style={{flex: 0.66}}>
            <Text>bb</Text>
          </View>
      </View>
    );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    backgroundColor: 'green'
  },
});


export default UserCard;

props.user.image = '资产/测试/joan.jpg'

如果我放一张图片：

<Image source={require('Assets/test/joan.jpg')} style={{width: 100, height: 100}}/>

其作品。

在资产中，我有名为 Assets 的 package.json，因此我可以使用绝对路径。

我已经测试了各种选项，但没有一个。

例如：

return (
   const user_image = require(props.user.image);
   ... 
      <Image source={user_image} style={{width: 100, height: 100}}/>
   ...

其他：

return (
   const user_image = props.user.image;
   ... 
      <Image source={require(user_image)} style={{width: 100, height: 100}}/>
   ...

或者使用 src 而不是源代码，但它不起作用......

我也测试它改变 const UserCard = props => {

为了 class UserCard extends React.Component {

而且还是一样...

请帮忙。

编辑：

带有对象用户的主屏幕

const users = [
      {
        "image" : "Assets/test/fernando.jpg",
        "name" : "Fernando",
        "description" : "General Manager",
      },
      {
        "image" : "Assets/test/daniel.jpg",
        "name" : "Daniel",
        "description" : "CEO",
      },
      {
        "image" : "Assets/test/joan.jpg",
        "name" : "Joan",
        "description" : "Manager",
      },
    ];

class HomeScreen extends React.Component {
   ...
   render() {
       return (
         <SafeAreaView style={styles.container}>
           <ScrollView
             style={styles.container}
             contentContainerStyle={styles.contentContainer}>
             { typeof users === 'object' && users.length > 0 && (users.map((user, index) => {
              return (
                  <View key={index} style={{flex: 1, backgroundColor: 'red'}}>
                    <UserCard user={user} />
                  </View>
              )})
            ) }  
           </ScrollView>
         </SafeAreaView>
       );
     }

标签： javascriptimagereact-nativerequire