通过选择器选择动态更改图像源

Question

使用本机运行项目的新手，以本机操作。

我有一个选择器，用户必须选择一个注射器的大小，然后基于该选择，我想显示适当的图像。

我设法对单个图像进行硬编码，但是我无法弄清楚如何将新图像源链接到对象，因此当有人进行新选择时，它将更新屏幕上的图像。

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Center } from "./center";
import { Text, Button, Image, StyleSheet, Picker, View, TouchableOpacity, Keyboard, TouchableWithoutFeedback, ScrollView, Platform } from "react-native";
import { TextInput } from "react-native-paper";
import { AuthContext } from './authProvider';
import { Ionicons, FontAwesome, Fontisto } from "@expo/vector-icons";
import { CompoundStack } from './compoundStack';


interface AppTabsProps {

}

const Tabs = createBottomTabNavigator();



const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});



function calc2() {

    const [value, onChangeText] = React.useState('');
    const { logout } = useContext(AuthContext);
    const [selectedValue, setSelectedValue] = useState("100");


    
    console.log(selectedValue);
    
   
    return (
<ScrollView keyboardShouldPersistTaps="handled" >

        <Center>
            <Text>Reconstitution Calculator</Text>
           
            <Image
       style={styles.tinyLogo}
       source={require('../assets/favicon.png')}
      />
      <Text>Select Syring Size</Text>
       <Picker
        itemStyle={{height: 44}}
        selectedValue={selectedValue}
        style={{ width: "50%" }}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="1mL (100 Units)" value="100" />
        <Picker.Item label="0.5mL (50 Units)" value="50" />
        <Picker.Item label="0.3mL (30 Units)" value="30" />
      </Picker>
      <Image
       source={require('../assets/100Unit.png')}
      />
       <Image
       style={{ resizeMode: 'contain', height: 120}}
       source={require('../assets/peptides.png')}
      />
            <TextInput
            
            label="Total Peptide Weight (mg)"
            mode="outlined"
            style={{ width: "60%" }}
            keyboardType={'numeric'}
            onChangeText={text => onChangeText(text)}
            value={value}
           />

        <Image
        style={{ resizeMode: 'contain', height: 120}}
        source={require('../assets/bac-water.png')}
        />
            <TextInput
            label="Bacteriostatic Water (mL)"
            mode="outlined"
            style={{ width: "60%" }}
            keyboardType={'numeric'}
            onChangeText={text => onChangeText(text)}
            value={value}
           />
           <Button title="Calculate" onPress={() => {}} />
        </Center>
        </ScrollView>
    );
}

export const AppTabs = ({}) => {
        return (
            <Tabs.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                  let iconName;
      
                  if (route.name === 'Dose Calculator') {
                    iconName = 'balance-scale';
                      return <FontAwesome name={iconName} size={size} color={color} />;
                  } else if (route.name === 'Reconstitution Calculator') {
                    iconName = 'injection-syringe';
                    return <Fontisto name={iconName} size={size} color={color} />;
                  }
      
                 
                  
                },
              })}
              tabBarOptions={{
                activeTintColor: 'tomato',
                inactiveTintColor: 'gray',
              }}>
                <Tabs.Screen name="Dose Calculator" component={CompoundStack}/>
                <Tabs.Screen name="Reconstitution Calculator" component={calc2}/>
                
            </Tabs.Navigator>
        );
}```