React Native Add Spacing Между компонентами - PullRequest
Новая
       15

React Native Add Spacing Между компонентами

0 голосов
/ 06 января 2020

Мне нужна помощь в устранении перекрытия представлений в моем собственном приложении реакции (необходим интервал между ними). ​​

После двойного нажатия на знак плюса в верхнем правом углу два представления в конечном итоге перекрываются без пробела между ними. их (которые называются компонентами HoldWorkout)

Изображение перекрытия

Мое приложение. js содержит: 

                let PRs = PRArray.map((val, key) => {
                 return (
                     <HoldWorkout
                        key={key}
                        keyval={key}
                        val={val}
                        exName={setName}
                        setsHold={setSets}
                     />
                  );
                });

PR содержится в следующий вид прокрутки при возврате: 

        <View style={styles.container}>
            <View style={styles.whiteColor}>
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={addPR.bind(this)}
                    style={styles.TouchableOpacity}
                >
                    <Icon name="ios-add" color="purple" size={45} />
                </TouchableOpacity>

                <View style={styles.header}>
                    <Text style={styles.headerTitle}>Personal Records</Text>
                </View>
            </View>

            <ScrollView style={styles.scrollViewStyle}>
                <View style={styles.color}>{PRs}</View>
            </ScrollView>
        </View>

Стили в приложении. js: 

               const styles = StyleSheet.create({
                   whiteColor: {
                     backgroundColor: "white",
                     borderBottomColor: "#F0EFF5",
                     borderBottomWidth: 2,
                     height: 80
                  },
                  container: {
                    flex: 1,
                    borderBottomColor: "#F0EFF5",
                    borderBottomWidth: 2
                  },
                  color: {
                     marginTop: 20,
                     backgroundColor: "#F0EFF5"
                  },
               });

В HoldWorkout. js при возврате У меня 

             <View key={props.keyval} style={styles.boxWorkouts}>
                 <TextInput
                    style={styles.input2}
                    placeholder="Excercise Name"
                    placeholderTextColor="#a9a9a9"
                    onChangeText={props.exName}
                 />
                 <ExSets weight={setWeights} rep={setRep} date={setDates} />
                 {sets}
                 <View style={styles.addSet}>
                     <Button title="Add Set" color="purple" onPress={addSets}></Button>
                 </View>
             </View>

Стиль для представления - это style.boxWorkouts, который находится в HoldWorkout. js и выглядит как 

             const styles = StyleSheet.create({
                 boxWorkouts: {
                    borderColor: "#BFBFBF",
                    borderWidth: 1,
                    backgroundColor: "white",
                    height: 90
                 }
              });

Я попытался добавить marginBottom: 100 в styles.boxWorkouts, но это фиксированная сумма, и если Я нажимаю кнопку «Добавить набор» на одном из компонентов HoldWorkout, затем он добавляет еще одну строку, которая увеличивает высоту компонента и в конечном итоге перекрывает компонент под ним.

Изображение после нажатия кнопки «Добавить» Установить на первое удержание Компонент тренировки с установленным для marginBottom значением 100

Помогите, пожалуйста, рассказать, как исправить интервал для этого, поскольку я пытался выяснить это некоторое время, потому что я не уверен, как получить компоненты нажал кнопку «Добавить набор» на компонентах выше. Это гарантирует, что оно не будет перекрываться независимо от того, сколько раз нажата кнопка «Добавить набор» на компонентах HoldWorkouts выше.

1 Ответ

0 голосов
/ 06 января 2020

Вам нужно добавить пустую строку или пустой div с интервалом, как показано ниже. 

let PRs = PRArray.map((val, key) => {
                 return (
                     <div>
                        <HoldWorkout
                          key={key}
                          keyval={key}
                          val={val}
                          exName={setName}
                          setsHold={setSets}
                        />
                        <div>&nbsp; <br/> </div>
                     </div>
                  );
                });
...