Изображение 1 (Что я получаю)
Изображение 2 (Что я получаю)
Изображение 3 (Что я получаю)
Моя проблема в том, что я хочу, чтобы весь текст находился в первой строке каждого блока, в настоящее время я собираю данные из firebase-firestore, чтобы сделать это и (затем хочу иметь возможность перетасовать его, но это на потом), тогда я хочу, чтобы это было в середине окна. Всякий раз, когда я пытаюсь добавить отступы или поля, он толкает каждый текст вниз, а не только нажимает или поднимает эту одну текстовую строку. Я не понимаю, почему это происходит, если кто-то может мне помочь, это было бы здорово! ниже вы найдете весь мой код, а также мой стиль для него go без ума от него!
любая помощь будет принята с благодарностью!
(Извините, если объяснение повсюду)
Я как бы ищу что-то подобное, если это поможет
Рисунок 4 (Что я ищу)
import React from 'react';
import { Platform, StyleSheet, Text, View, ActivityIndicator, FlatList, Dimensions, SafeAreaView, } from 'react-native';
import { Header } from 'react-native-elements';
import firebase from 'firebase';
import { ScrollView } from 'react-native-gesture-handler';
const Reward = ({reward}) => {
return (
<SafeAreaView style={styles.container}>
<View style={styles.item}>
<View>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black', }}>{reward.Title1}</Text>
<Text style={{ fontSize: 14, color: 'black' }}>{reward.Caption1}</Text>
</View>
<View style={{marginBottom:200}}>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black' }}>{reward.Title2}</Text>
<Text style={{ fontSize: 14, color: 'black' }}>{reward.Points2}</Text>
<Text style={{ fontSize: 12, color: 'black' }}>{reward.Caption2}</Text>
</View>
<View>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black' }}>{reward.Title3}</Text>
<Text style={{ fontSize: 14, color: 'black' }}>{reward.Points3}</Text>
<Text style={{ fontSize: 14, color: 'black' }}>{reward.Caption3}</Text>
</View>
<View>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black' }}>{reward.Title4}</Text>
<Text style={{ fontSize: 14, color: 'black'}}>{reward.Caption4}</Text>
</View>
<View>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black' }}>{reward.Title5}</Text>
<Text style={{ fontSize: 14, color: 'black' }}>{reward.Points5}</Text>
<Text style={{ fontSize: 14, color: 'black'}}>{reward.Caption5}</Text>
</View>
<View>
<Text style={{fontSize: 18, fontWeight: 'bold', color: 'black', }}>{reward.Title6}</Text>
<Text style={{ fontSize: 14, color: 'black'}}>{reward.Caption6}</Text>
</View>
</View>
</SafeAreaView>
);
};
const numColumns = 1;
export default class RewardScreen extends React.Component {
constructor() {
super();
this.ref = firebase.firestore().collection("rewards");
this.unsubscribe = null;
this.state = {
rewards: \[\],
loading: true,
};
}
componentDidMount() {
this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate)
}
componentWillUnmount() {
this.unsubscribe();
}
onCollectionUpdate = (querySnapshot) => {
const rewards = \[\];
querySnapshot.forEach((doc) => {
const {Title1, Title2, Title3, Title4,Title5, Title6, Caption1, Caption2, Caption3, Caption4, Caption5, Caption6, Points2, Points3, Points5, } = doc.data();
rewards.push({ key: doc.id, doc, Title1, Title2, Title3, Title4,Title5, Title6, Caption1, Caption2, Caption3, Caption4, Caption5, Caption6, Points2, Points3, Points5, });
});
this.setState({
rewards,
loading: false,
});
}
// addRandomPost = () => {
// this.ref.add({
// title: 'Added Reward by random button',
// likes: Math.floor((Math.random() * 10) + 1),
// uri: `https://picsum.photos/200/300?image=${Math.floor((Math.random() * 100) + 1)}`,
// });
// }
render() {
if (this.state.loading) {
return <ActivityIndicator size="large" />;
}
return (
<View>
<Header
centerComponent={{ text: 'Rewards', style: {fontSize: 25 } }}
containerStyle={{
backgroundColor: 'whitesmoke',
justifyContent: 'space-around',
}}
/>
<FlatList
data={this.state.rewards}
renderItem={({ item }) => (
<Reward reward={item}>
</Reward>
)}
numColumns={numColumns}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start', // if you want to fill rows left to right
justifyContent: 'space-around',
marginTop: 10,
alignSelf:'center',
},
item: {
width: 400,
height: 300,
borderRadius: 4,
borderWidth: 1.0,
borderColor: 'black',
}
});