我遇到了一些React Native TextInput方面的问题。
在添加createBottomTabNavigation之前,TextInput是正常工作的。在IOS上它表现得很好,但在Android上却不行。我创建了一个简单的组件,问题依旧存在。 问题如下:
- 当在SamplePage组件中点击TextInput字段时,页面会闪烁并且键盘会消失。
这是我真实的安卓设备上出现的问题图像:react-native android app
这是我的代码:
import React from 'react';
import 'react-native-gesture-handler';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableOpacity,
TextInput,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ContextApp from '../../context/contextApp';
import PremiumScreen from './premiumScreen';
import SettingsPage from '../setting/settingsPage';
import ProfileContainer from '../profile/profileContainer';
const MainPage = () => {
const Pages = () => {
return (
<SafeAreaView>
<StatusBar barStyle="dark-content"
backgroundColor="white"/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
alwaysBounceVertical={false}
style={styles.scrollView}>
<View style={styles.container}>
<View style={styles.partsView}>
<Text style={styles.sectionTitle}>Call Someone Today!</Text>
<View style={styles.switch}>
<Text style={styles.sectionDescription}>Go Online! </Text>
<Switch
style={styles.switchButton}
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
<Text style={styles.sectionTitle}>OR</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
)
}
const SamplePage = () => {
return (
<View>
<TextInput
placeholder="Can't type me"
style={{
backgroundColor: 'white',
width: '100%',
height: 40,
paddingLeft: 15,
fontSize: 20,
paddingBottom: 5,
paddingTop: 5,
color: 'grey'
}}></TextInput>
</View>
)
}
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName: string;
if (route.name === 'Home') {
iconName = focused
? 'ios-people'
: 'ios-people';
} else if (route.name === 'Premium') {
iconName = focused ? 'ios-star' : 'ios-star-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-settings' : 'ios-settings';
} else if (route.name === 'Profile') {
iconName = focused ? 'ios-contact' : 'ios-contact';
} else if (route.name === 'SamplePage') {
iconName = focused ? 'ios-star' : 'ios-star-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={Pages} />
<Tab.Screen name="Premium" component={PremiumScreen} />
<Tab.Screen name="Settings" component={SettingsPage} />
<Tab.Screen name="Profile" component={ProfileContainer} />
<Tab.Screen name="SamplePage" component={SamplePage} />
</Tab.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
scrollView: {
height: '100%',
},
// rest of styles
});
export default MainPage;
我的依赖项:
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/picker": "^1.6.4",
"@react-navigation/bottom-tabs": "^5.5.1",
"@react-navigation/native": "^5.2.6",
"@react-navigation/stack": "^5.3.2",
"@types/react-native-vector-icons": "^6.4.5",
"@types/shortid": "0.0.29",
"@types/yup": "^0.29.3",
"axios": "^0.19.2",
"formik": "^2.1.4",
"moment": "^2.27.0",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-image-crop-picker": "^0.32.0",
"react-native-image-picker": "^2.3.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-permissions": "^2.1.5",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0",
"react-native-sideswipe": "^1.5.0",
"react-native-vector-icons": "^6.6.0",
"react-native-webview": "^9.4.0",
"shortid": "^2.2.15",
"yup": "^0.29.1"
},
需要帮助解决这个问题!先谢谢了!