реагировать родной стайлинг компонент - PullRequest
Новая
       8

реагировать родной стайлинг компонент

0 голосов
/ 05 мая 2018

Я пытаюсь стилизовать компонент, но не могу понять, как сделать пару вещей. 1) Я хочу применить цвет фона к 100% моего компонента 

return (
        <TouchableWithoutFeedback
          style={styles.touchable}
          onPress={() =>
            this.props.navigation.navigate('Quotes', { name: this.props.name })}
        >
          <View style={styles.viewStyle}>
              <Image
                source={this.props.image}
                key={this.props.image}
                style={styles.imageStyle}
              />
              <Text style={styles.textStyle}> {this.props.name} </Text>
          </View>
        </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  imageStyle: {
    height: 100,
    width: 100
  },
  touchable: {
    width: '100%',
    backgroundColor: 'black'
  },
  viewStyle: {
    height:100,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: 'black'
  },
  textStyle: {
    marginLeft: 20,
    width: 120,
    fontWeight: 'bold',
    fontSize: 15
  }
}

Я пытался применить цвет фона к сенсорному тегу тега просмотра, но ничего из этого не получилось. Кроме того, я хотел бы расположить мое изображение в верхнем левом углу компонента, используя justifyContent: flex-start. Но мои элементы внутри тега представления остаются центрированными.

Как мне достичь этих целей enter image description here?

Родительский компонент: 

  render() {
    const {listStyle} = styles
    return (
      <ScrollView style={listStyle}>
        {this.renderCharacters(this.props.matches)}
      </ScrollView>
    );
  }

}
const styles = {
  listStyle: {
    width: '100%',
    height: '100%'
  }
}
...