反应原生样式组件

Question

我正在尝试设计组件，但无法弄清楚如何做一些事情。 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将我的图像定位在组件的左上角。但是我在view标签中的元素始终保持居中。

我如何实现这些目标？

父组件是：

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

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