Привет всем, у меня точно такая же проблема с этим. но на этот вопрос еще нет ответа
я застрял в этом весь день, ответа нет, я использую последний собственный реагирующий и последний реагирующий пакет навигации
React navigation focus on ввод сразу размывается
, так что это моя страница формы, где при первой загрузке вводимый текст размывается, когда я щелкаю текстовое поле
import React, { Component } from 'react'
import { View, Dimensions } from 'react-native'
import {
Container,
Content,
Button,
Text,
Form,
Item,
Input,
Label,
Textarea
} from 'native-base';
import Ion from 'react-native-vector-icons/Ionicons'
class Compose extends Component{
render(){
return(
<Container>
<Content>
<Form style={{ padding: 10 }}>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="ios-person" size={25} style={{ marginRight: 12 }}/>
<Label>Product Name*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/>
<Label>Price*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/>
<Label>Drop rate*</Label>
<Input
/>
</Item>
<Item inlineLabel style={{ marginBottom: 15 }}>
<Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/>
<Label>Contact number*</Label>
<Input
/>
</Item>
<Textarea
rowSpan={5} bordered
placeholder="Description"
style={{ marginBottom: 15 }}
/>
<Button block success style={{ height: 60, marginBottom: 14 }}>
<Ion name="md-images" size={25} style={{ color: 'white' }}/>
<Text style={{ fontSize: 20 }}>Upload Photos</Text>
</Button>
<Button block danger>
<Ion name="ios-cellular" size={25} style={{ color: 'white' }}/>
<Text>Broadcast</Text>
</Button>
</Form>
</Content>
</Container>
)
}
}
export default Compose
, а вот мой компонент навигации
import React, { Component } from 'react';
import { Text } from 'react-native'
//Navigation
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
//Screens
import { Welcome, Compose } from './src/index'
import {
Header,
Left,
Button,
Icon,
Body,
Title,
Right
}
from 'native-base'
const Stack = createStackNavigator();
const AppbarList = {
welcome: function(navigation){
return null
},
compose: function(navigation){
return (
<Header>
<Left>
<Button transparent rounded>
<Icon name='arrow-back' onPress={()=>{ navigation.goBack() }}/>
</Button>
</Left>
<Body>
<Title></Title>
</Body>
<Right />
</Header>
)
}
}
const Appbar = ( scene, navigation )=> {
const { options } = scene.descriptor;
const title = scene.route.name;
return AppbarList[title.toLowerCase()](navigation)
}
class App extends Component{
render(){
return(
<NavigationContainer>
<Stack.Navigator
headerMode="screen"
screenOptions={{
header: ({ navigation, scene, previous }) => Appbar( scene, navigation )
}}
>
<Stack.Screen
name="Welcome" component={Welcome}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
<Stack.Screen
name="Compose" component={Compose}
options={{
...TransitionPresets.FadeFromBottomAndroid,
}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
export default App;