Text Input Not Working in React Native with Navigation

Question

I am trying to create an NPI Registry search in react-native and for some reason, react native Textinput isn't working. Here is the code:

render() {
let half1 = 'https://npiregistry.cms.hhs.gov/api/?first_name='
let half2 = '&city=&limit=20&version=2.1'
let loaded
if (!this.state.result.results && this.state.user_input) {
    loaded = true;
}
const HomeScreen = ({ navigation }) => {
    return (
        <View style={styles.body}>
            <Text style={styles.headertext}>NPI Registry Search</Text>
            <View style={styles.inputstyle}>
                <View style={{ width: 40, alignItems: 'center', justifyContent: 'center' }}>
                    <FontAwesomeIcon icon={faSearch} size={10} style={styles.searchicon} />
                </View>
                <View style={{ width: Dimensions.get('window').width - 40 }}>
                    <TextInput
                        placeholder="Search"
                        onChangeText={this.handleInput}
                    />
                </View>
            </View>
            <TouchableOpacity
                style={styles.submitButton}
                onPress={
                    () => this.makeHTTPCall(half1, this.state.user_input, half2)
                }>
                <Text style={styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
            <View>

                {loaded ? (<View style={styles.activityindicatorbar}><ActivityIndicator size="large" color="red" /></View>) :

                    <View style={styles.body2}>

                        <FlatList
                            data={this.state.result.results}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={
                                ({ item }) => <View style={styles.renderIteminList}><Text style={styles.renderIteminListLarge}>{item.basic.last_name}, {item.basic.first_name}</Text><Text>{item.addresses[0].address_1}</Text></View>
                            }
                            ListEmptyComponent={this.emptyListView}
                        />
                    </View>
                }
            </View>
        </View>
        )
}

const ProfileScreen = ({ navigation, route }) => {
    return (
        <Text>This is {route.params.name}'s profile</Text>
        )
}

return (
    <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{ title: 'Welcome' }}
            />
            </Stack.Navigator>
        </NavigationContainer>
    )

}

}

const App = () => {
//const [value, onChangeText] = React.useState('Useless Placeholder');
//const [count, setCount] = useState(0);
//const onPress = () => setCount(prevCount => prevCount + 1);


return (
<>
      <My_Input/>

</>

); };

The code was working fine before I added the StackNavigator stuff and moved what is currently in HomeScreen to the const. Now, the textinput runs immediately (doesn't wait for me to press the button) and fails to ever load. Please let me know what the problem might be.

Thanks!

Answer 1

等待大神解答