Считывание закадрового текста для элементов, отображаемых с использованием плоского списка, не в правильном порядке. проблема может быть воспроизведена только в IOS, а в android работает нормально. У меня есть несколько интерактивных элементов в столбце. представьте столбцы, содержащие любимую иконку, изображение, многострочный текст и кнопку добавления. Ожидаемое поведение : сначала следует прочитать значок отката, изображение, многострочный текст и кнопку добавления из столбца 1, а затем то же из 2-го столбца. Фактическое поведение: в настоящее время он читает значок отката следующего порядка (столбец 1) -> значок отката (столбец 2) -> изображение (столбец 1) -> изображение (столбец 2) ---> многострочный текст (столбец 1) -> многострочный текст (столбец 2) -> кнопка добавления (столбец 1) -> кнопка добавления (столбец 2)
import React from 'react';
import {
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
SafeAreaView,
FlatList,
Dimensions,
} from 'react-native';
const data = [
{ key: 'Apple', price:'$1.91 each' },
{ key: 'Organic Bananas, bunch', price:'$2.91/LB' },
{ key: 'Banana Babies', price:'$2.91 avg price' },
{ key: 'meat',price:'$20.91' },
{ key: 'Eggs' , price:'$12.91 avg price'},
{ key: 'Fish' , price:'$7.91 avg price'},
{ key: 'Green Apples', price:'$9.91 avg price' },
{ key: 'fresh fruits', price:'$6.91 avg price'},
{ key: 'Ice cream', price:'$2.91 avg price' }
];
const numColumns=2;
class App extends React.Component{
renderItem=({item,index})=>{
return(
<View style={styles.item}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
accessible={false}
>
<Text style={styles.itemText1}>Rollback</Text>
</TouchableOpacity>
<View accessible={true}
accessibilityLabel="This is Demo Image">
<Image
style={{width: 75, height: 75}}
source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
</View>
<Text style={styles.itemText}>{item.key}</Text>
<TouchableOpacity>
<Text style = {styles.button}>
ADD
</Text>
</TouchableOpacity>
<Text style={styles.itemText}>{item.price}</Text>
</View>
)
};
render(){
return(
<SafeAreaView style={styles.container1}>
<FlatList
data={data}
style={styles.container}
renderItem={this.renderItem}
numColumns={numColumns}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
marginVertical:20,
},
container1: {
flex: 1,
},
item: {
backgroundColor:"grey",
alignItems:'center',
justifyContent:'center',
flex:1,
margin:1,
height:Dimensions.get('window').width/numColumns,
},
itemText: {
color:'#fff',
paddingTop:5,
},
itemText1: {
flexDirection:'row',
color:'red',
paddingBottom:4,
justifyContent:'flex-end'
},
imageThumbnail: {
justifyContent: 'center',
alignItems: 'center',
height: 100,
},
button: {
backgroundColor: '#DDDDDD',
margin:4
},
});
export default App;