如何解决文本输入内部焦点松散反应本机选项卡视图
从'react'导入React，{组件}; 导入{ 视图，文本，尺寸，KeyboardAvoidingView，StyleSheet，ScrollView，Picker，TextInput，TouchableOpacity， 图片，FlatList，SafeAreaView，键盘， I18nManager， 互动管理器 }来自“ react-native”； 从'../component/header'导入Header； 从'react-native-tab-view'导入{TabView，SceneMap，TabBar}; 从'../component/Button'导入Button； 从“ ../component/Card”导入卡； 从'../component/CardSection'导入CardSection； 从'../component/ImageCardSection'导入ImageCardSection； 从'axios'导入axios; 从'../component/Spinner'导入Spinner； 从'react-native-dropdown-picker'导入DropDownPicker; 导入“ react-native-gesture-handler” 从“ ./CarRescueScreen”导入CarRescueScreen； 从“ react-native-reanimated”导入动画；
const initialLayout = { width: Dimensions.get('window').width };
const numofcolumns = 4;
export default function CarrescueForm() {
React.useEffect(() => {
// Update the document title using the browser API
setServiceList([])
setmodelList([])
setmakeList([])
getcar()
getcarmanufacture()
// getcarrescueservice()
},[]);
// React.useEffect(() => {
// if (index)
// getcarrescueservice(index + 1)
// },[index])
const [selectedValue,setSelectedValue] = React.useState("Select");
const [index,setIndex] = React.useState(0);
let [vechno,setVechno] = React.useState("");
const [other,setother] = React.useState('');
const [loading,setLoading] = React.useState(false);
const [refresh,setrefresh] = React.useState(false);
const [serviceList,setServiceList] = React.useState([]);
const [selectedmakeValue,setSelectedMakeValue] = React.useState("");
const [makeList,setmakeList] = React.useState([]);
const [selectedmodelValue,setSelectedModelValue] = React.useState("");
const [modelList,setmodelList] = React.useState([]);
const [routes,setRoutes] = React.useState([
// { key: 'first',title: 'SUV' },// { key: 'second',title: 'Sedan' },// { key: 'third',title: 'Hatchback' },]);
const onIndexchange = (idx,rarray) => {
console.log('index>>>',index);
console.log('rarray>>>',rarray);
getcarrescueservice(rarray[idx].key);
setIndex(idx)
if (index < idx && idx !== 0)
setServiceList([]);
}
const getcar = async () => {
try {
setLoading(true);
const response = await axios.get('http://www.xxxx');
console.log('? Returned data:',response);
setLoading(false);
console.log("Its your time baby" + response.data.Status);
if (response.data.Status > 0) {
console.log("Its your time baby S")
if ((response.data.Data).length > 0) {
const routArray = []
response.data.Data.map(carData => {
routArray.push({ key: carData.id,title: carData.car })
})
setRoutes(routArray);
getcarrescueservice(routArray[0].key);
}
console.log(response.data.data);
}
else {
alert(response.data.Message);
console.log(response.data.Message);
}
} catch (error) {
}
}
const getcarrescueservice = async (carId) => {
try {
setLoading(true);
const response = await axios.get(`http://www.xxxx`);
console.log('? Returned data:',response);
setLoading(false);
console.log("Its your time baby" + response.data.Status);
if (response.data.Status > 0) {
console.log("Its your time baby S")
setServiceList(response.data.Data);
console.log(response.data.data);
}
else {
alert(response.data.Message);
console.log(response.data.Message);
}
} catch (error) {
}
}
const getcarmanufacture = async () => {
try {
setLoading(true);
const response = await axios.get('http://www.xxxx');
console.log('? Returned data:',response);
setLoading(false);
console.log("Its your time baby" + response.data.Status);
if (response.data.Status > 0) {
console.log("Its your time baby S")
const addListData = []
await Promise.all(await response.data.Data.map(makeData => {
addListData.push({ label: makeData.manufacture,value: makeData.id })
}))
setmakeList(addListData);
console.log("makeList------------------->",makeList);
}
else {
alert(response.data.Message);
console.log(response.data.Message);
}
} catch (error) {
}
}
const getcarmodel = async (makeId) => {
try {
setLoading(true);
const params = new URLSearchParams();
params.append('manufactureid',makeId);
const response = await axios.post('http://www.xxxx',params);
console.log('? Returned data:',response);
setLoading(false);
console.log("Its your time baby" + response.data.Status);
if (response.data.Status > 0) {
console.log("Its your time baby S makelist")
const carList = []
await Promise.all(await response.data.Data.map(modelData => {
carList.push({ label: modelData.model,value: modelData.id })
}))
setmodelList(carList);
console.log(response.data.data);
}
else {
alert(response.data.Message);
console.log(response.data.Message);
}
} catch (error) {
}
}
const onChangeItem = (item) => {
console.log('make item is here',item.value);
setSelectedMakeValue(item.value);
getcarmodel(item.value)
}
const renderItem = ({ item }) => {
console.log('itrm>>>>',item.Imageurl);
return (
<View style={{ flex: 1 }}>
{item && !item.empty && (<View style={{ flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',marginTop: 5 }}>
<View style={{ flex: 1,alignSelf: 'center',marginLeft: 5,borderColor: '#ffa737',borderWidth: 1 }}>
<View style={{ flex: 1 }}>
<CardSection>
<Image
style={styles.imageStyle}
source={{ uri: `http://www.fastnsure.in/car/${item.Imageurl}` }}
/>
</CardSection>
</View>
<View style={{ flex: 2 }}>
<CardSection>
<Text style={{ fontWeight: 'bold',color: '#000',fontSize: 12,fontFamily: 'serif',alignSelf: 'center' }}>{item.service_name}</Text>
</CardSection>
</View>
</View>
</View >)}
</View>
)
}
const formatdata = (data,numofcolumns) => {
const numoffullrows = Math.floor(data.length / numofcolumns);
let noofelementslastrow = data.length - (numoffullrows * numofcolumns);
while (noofelementslastrow !== numofcolumns && noofelementslastrow !== 0) {
data.push({ serviceid: `blank-${noofelementslastrow}`,empty: true });
noofelementslastrow = noofelementslastrow + 1;
}
return data;
}
// const setVechNo = (event) => {
// }
const _onChangeText = name => setVechno(name);
_input.focus();
const renderScreen = () => {
return (
<View>
<ScrollView style={{ flexGrow: 1,backgroundColor: '#fff' }}>
<TextInput style={styles.textStyle}
ref={(c) => _input = c}
placeholder="Enter Vechicle No"
value={vechno}
onChangeText={(vno) => _onChangeText(vno)}
blurOnSubmit={false}
>
</TextInput>
{/* <CardSection> */}
{makeList && makeList.length > 0 && (
<DropDownPicker
placeholder='Select Manufacture'
defaultValue={selectedmakeValue && selectedmakeValue}
// defaultValue={selectedmakeValue}
items={makeList}
searchable={true}
containerStyle={{ height: 50 }}
style={{ backgroundColor: '#fff',borderColor: '#000',borderWidth: 1,marginRight: 5,marginTop: 5,fontFamily: 'serif' }}
itemStyle={{
justifyContent: 'flex-start',fontFamily: 'serif'
}}
dropDownStyle={{ backgroundColor: '#fff' }}
onChangeItem={itm => onChangeItem(itm)}
/>
)}
{/* </CardSection> */}
{/* <CardSection> */}
{modelList && modelList.length > 0 && (
<DropDownPicker
placeholder="Select Model"
searchable={true}
defaultValue={selectedmodelValue && selectedmodelValue}
items={modelList}
containerStyle={{ height: 50 }}
style={{ backgroundColor: '#fff',marginTop: 10,}}
dropDownStyle={{ backgroundColor: '#fff' }}
onChangeItem={item => setSelectedModelValue(
item.value
)}
/>
)}
{/* </CardSection> */}
<TextInput style={styles.textStyle}
autoCorrect
placeholder="Other details"
value={other}
onChangeText={othr => setother(othr)}
blurOnSubmit={true}
></TextInput>
<View style={{ marginLeft: 5,marginRight: 5 }}>
<ImageCardSection>
<Text style={{ fontWeight: 'bold',color: '#fff',fontSize: 20,fontFamily: 'serif' }}>Vechicle Problem</Text>
</ImageCardSection>
{serviceList && serviceList.length > 0 &&
<FlatList
// data={serviceList}
data={formatdata(serviceList,numofcolumns)}
renderItem={renderItem}
numColumns={numofcolumns}
exTradata={serviceList}
keyExtractor={item => item.serviceid}
/>
}
<Button>SUBMIT</Button>
</View>
{loading && <Spinner />}
</ScrollView>
</View>
)
};
const FirstRoute = () => (
renderScreen()
);
const SecondRoute = () => (
<View></View>
);
const ThirdRoute = () => (
<View></View>
);
const renderScene = SceneMap({
1: FirstRoute,2: SecondRoute,3: ThirdRoute,});
const renderTabBar = props => (
<TabBar
{...props}
renderLabel={({ route,focused,color }) => (
<Text style={{ color,margin: 8,fontSize: 16 }}>
{route.title}
</Text>
)}
indicatorStyle={{ backgroundColor: '#ffa737' }}
style={{ backgroundColor: '#000' }}
/>
);
return (
<>
<Header headerText='Car Rescue Form' />
<TabView
renderTabBar={props => renderTabBar(props)}
navigationState={{ index,routes }}
renderScene={renderScene}
onIndexChange={(idx) => onIndexchange(idx,routes)}
initialLayout={initialLayout}
onSwipestart={() => setServiceList([])}
keyboarddismissMode={'on-drag'}
/>
</>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,},pikerStyle: {
height: 50,borderRadius: 5,marginBottom: 10,color: '#000'
},textStyle: {
height: 50,marginTop: 10
},imageStyle: {
alignSelf: 'center',height: 30,width: 30,}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。