Как упорядочить карты, чтобы сформировать вид сетки в реагировать родной - PullRequest
Новая
       7

Как упорядочить карты, чтобы сформировать вид сетки в реагировать родной

0 голосов
/ 29 октября 2018

Я хочу расположить карточки таким образом, чтобы они образовывали вид сетки. Я пробовал несколько компонентов вида сетки, но не могу перейти к каждому элементу в пределах данных npm install react-native-super-grid. Так что я подумал создание сетки с помощью CardSection моего собственного. Но я не знаю, как расположить его в ряд по 2 карты на каждую строку. Ниже приведен мой код для CardSection

cardsection 

  const CardSection = (props) =>{
    return(
    <View style={styles.containerStyle}>
    {props.children}
    </View>
    );

};
const styles ={
    containerStyle: {
        padding: 10,
        backgroundColor: 'white',
        borderWidth:0,
        marginBottom:10,
        marginLeft:10,
        marginRight:10,
        borderColor:'#808080',
        marginTop:50,
        elevation: 10,
        flexDirection:'row',
       flexWrap:'wrap'
    }
};

Что я пробовал сейчас, так это просто перечислил карты следующим образом

список 

  <CardSection>
    <TouchableOpacity onPress={() => Actions.newworkRequest()}>
      <Text>New Work Request</Text>
    </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.workerDetails()}>
    <Text>Worker</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.reportViewing()}>
    <Text> Reports</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.compltpage()}>
    <Text> Complaints</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.userpage()}>
    <Text> Users</Text>
   </TouchableOpacity>
  </CardSection>

Как мне сделать это в виде сетки? Так, что 2 карты в ряд. Помогите. Вот что я получаю сейчас https://i.stack.imgur.com/vtnuv.png. Я пытался дать FlexDirection:row, но все карты будут в одном ряду. Так что я удалил Пожалуйста, помогите мне для решения.

1 Ответ

0 голосов
/ 29 октября 2018

Вы должны применить эти стили к родителю всех этих разделов карты. 

const styles ={
  mainContainer: {
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row'
  },
  containerStyle: {
        padding: 10,
        backgroundColor: 'white',
        borderWidth:0,
        marginBottom:10,
        marginLeft:10,
        marginRight:10,
        borderColor:'#808080',
        marginTop:50,
        elevation: 10
    }
}

Список 

<View style={styles.mainContainer}>
  <CardSection style={styles.containerStyle} />
  ...
</View>
...