React Native: как объединить встроенные элементы, чтобы они были объединены - PullRequest
Новая
       37

React Native: как объединить встроенные элементы, чтобы они были объединены

0 голосов
/ 12 февраля 2019

У меня есть список встроенных сенсорных элементов, разделенных запятыми, например: 

[(<TouchableOpacity><Text>a</Text></TouchableOpacity>),
 (<Text>, </Text>),
 (<TouchableOpacity><Text>b</Text></TouchableOpacity>),
 (<Text>, </Text>),
 (<TouchableOpacity><Text>c</Text></TouchableOpacity>)]

рендеринг в виде строки элементов, разделенных запятыми: 

a, b, c

Проблема в том, что иногда запятаяпереносится на новую строку, которая выглядит довольно уродливо: 

a, b, c
, d

Как объединить два «встроенных» элемента, чтобы они были объединены вместе?

Обновление. Код:

...

    let items1 = [];
    for (let i = 1; i <= 100; i++) {
        const text = makeid(i % 10 + 1);

        items1.push((<TouchableOpacity><Text style={{fontSize: 18}}>{text}</Text></TouchableOpacity>));
        items1.push((<Text style={{fontSize: 18}}>, </Text>));
    }

    return (<View style={styles.li}>
        {items1}
    </View>);

...

// just generates some random string
function makeid(len) {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < len; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

const styles = StyleSheet.create({
    li: {
        width: "100%",
        flexDirection: "row",
        flexWrap: "wrap",
        marginBottom: 5,
        paddingLeft: 10
    }
});

Результат:

enter image description here

1 Ответ

0 голосов
/ 12 февраля 2019

1.Исходное решение

Согласно официальной документации:

Text поддерживает вложение, стилизацию и обработку касаний.

Так что если выВы добавляете TouchableOpacity только для того, чтобы получить поддержку onPress, тогда это совершенно бесполезно.В этом случае вы можете просто удалить его и обернуть все Text блоки в родительский Text, и ваша проблема будет решена.

Как вы правильно заметили, этот

оставляетПользователь без хорошей анимации, предоставленной <TouchableOpacity>.

Я подумал о лучшем решении, и это было не так уж и далеко:)

2.Другое (и лучшее?) Решение

Просто оберните <TouchableOpacity> и связанные <Text> запятой в один <View> с flexDirection: 'row' и добавьте его в массив, к которому вы собираетесьrender. 

  render() {
    let items1 = [];
    for (let i = 1; i <= 100; i++) {
      const text = makeid((i % 10) + 1);

      items1.push(
        <View style={{ flexDirection: 'row'}}>
          <TouchableOpacity>
            <Text style={{ fontSize: 18 }}>{text}</Text>
          </TouchableOpacity>
          <Text style={{ fontSize: 18 }}>, </Text>
        </View>
      );
    }
    return (
      <View style={styles.li}>{items1}</View>
    );
  }

Таким образом, вы уверены, что запятая не отделяется от предыдущего слова, и вы получаете <TouchableOpacity> анимацию.

Здесь вы можете найтирабочий пример.Надеюсь, это поможет!

...