时间戳

首页 > 解决方案 > 试图在我的主屏幕中显示注册名称

reactjs - 试图在我的主屏幕中显示注册名称

问题描述

嗨，所以我有一个应用程序，该人注册自己并被带到主屏幕，在那里我有一个已注册的每个人的平面列表。我想让它可以显示在主屏幕上登录的用户名，如 Welcome {user}。我仍然是初学者，所以任何帮助都会很有用。这是我的代码：-

注册屏幕：-

function SignupScreen(props) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');

  const sendCred = async (props) => {
    fetch('http://10.0.0.2/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password,
        name: name,
      }),
    })
      .then((res) => res.json())
      .then(async (data) => {
        try {
          await AsyncStorage.setItem('token', data.token);
          props.navigation.navigate('Home');
        } catch (e) {
          console.log('error', e);
        }
      });
  }; 
  return (
        <TextInput
          label="Email"
          mode="outlined"
          value={email}
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
          theme={{ colors: { primary: 'blue' } }}
          onChangeText={(text) => setEmail(text)}
        />
        <TextInput
          label="password"
          mode="outlined"
          secureTextEntry={true}
          value={password}
          onChangeText={(text) => {
            setPassword(text);
          }}
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
          theme={{ colors: { primary: 'blue' } }}
        />
        <TextInput
          label="Name"
          value={name}
          mode="outlined"
          onChangeText={(text) => setName(text)}
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
          theme={{ colors: { primary: 'blue' } }}
        />
);
}

主屏幕：-

function HomeScreen({ navigation }) {
  const [data, setData] = useState([]);
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(true);

  const fetchData = () => {
    fetch('http://10.0.0.2/')
      .then((res) => res.json())
      .then((results) => {
        setData(results);
        setName(results.name);
        setLoading(false);

      })
      .catch((err) => {
        Alert.alert('something went wrong in HomeScreen_fetchData()');
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderList = (item) => {
    return (
      <Card
        style={styles.mycard}
        onPress={() => navigation.navigate('Profile', { item })}>
        <View style={styles.cardView}>
          <Image
            style={{ width: 60, height: 60, borderRadius: 50 / 2 }}
            source={{
              uri: item.picture,
            }}
          />
          <View style={{ marginLeft: 10 }}>
            <Text style={styles.text}>{item.name}</Text>
            <Text>{item.position}</Text>
          </View>
        </View>
      </Card>
    );
  };
  
  return (
      <CustomHeader title="Home" />
      <View style={{ flex: 1 }}>
        
        <Text>Your name is {name}</Text>

        <FlatList
          data={data}
          renderItem={({ item }) => {
            return renderList(item);
          }}
          keyExtractor={(item) => item._id}
          onRefresh={() => fetchData()}
          refreshing={loading}
        />
      </View>
  );
}

标签： reactjsreact-native

解决方案

仅当您有 jwt 令牌时，这才有效

一旦你这样做了（我们假设你已经将用户存储在令牌中）：

.then(async (data) => {
    try {
      await AsyncStorage.setItem('token', data.token);
      props.navigation.navigate('Home');

您可以创建一个将返回当前用户的文件（例如 Service/auth.service.js），我们使用jwt-decode（您需要从 nmpjs 导入）来解码令牌：

/**
* Return current user
*/
const getCurrentUser = () => {
    const token = localStorage.getItem("token");
    return jwtDecode(token);
};

export default {getCurrentUser}

然后，您可以将其导入 Home 组件，如下所示：

import AuthService from "hereThePath/Services/auth.service"


const user = AuthService.getCurrentUser();
console.log(`this is the user name ${user.name}`);

推荐阅读