Reactjs 反应本机添加顶部细标题

你好，我正在开发一个react原生应用程序一切正常，但我有一个问题

当我向下滚动时，你会看到手机电池和wifi（顶栏）在应用程序中

我希望应用程序位于手机顶栏下方，我如何才能做到这一点？ 这是世博会二维码 您应该使用

它将在不重叠“顶栏”的情况下渲染组件

从'react native'导入{SafeAreaView}
...
返回(
//您的组件
)

编辑： 正如你在书中看到的

只需使用应用了flex:1样式的SafeAreaView包装顶层视图即可。您可能还希望使用与应用程序设计相匹配的背景色

---

因此，如果您已经使用了

安全区域视图

，可能您没有

flex:1

，并且它没有按照您想要的方式工作。

请尝试一下，并告诉我您的结果：

     import React,{Fragment} from 'react';


            return (
              <Fragment>
               <SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
               <SafeAreaView style={styles.safeArea}>

               <View style={styles.container}>

              { this.gradient }
              <ScrollView
                style={styles.scrollview}
                scrollEventThrottle={200}
                directionalLockEnabled={true}
              >
                  { carousel } 

                  <FlatList
                  data={ this.state.GridListItems }
                  renderItem={ ({item}) =>
                    <TouchableOpacity
                      style={styles.GridViewContainer}
                    onPress={() => this.props.navigation.push('ProfileScreen', { height: "6'2", category: item.key })}>
                    <ImageBackground
                      source={{ uri: item.img }}
                      style={{width: '108%', height: '110%', justifyContent:'center'}}
                    >
                    <Text style={styles.GridViewTextLayout}  > {item.key} </Text>
                    </ImageBackground>

                    </TouchableOpacity>
                }
                numColumns={2}
         />
              </ScrollView>

          </View>
      </SafeAreaView>
    );

从“React”导入React，{Fragment}；
返回(
{this.gradient}
{carousel}
this.props.navigation.push（'ProfileScreen'，{height:'6'2'，category:item.key}}>
{item.key}
}
numColumns={2}
/>
);

我为状态栏添加了safeareaview（flex:0），您可以应用任何颜色

在导航器文件中提供以下选项：

navigationName: {
    screen: fileName,
    navigationOptions: ({ navigation }) => {
      if (Platform.OS === "android") {
        return {
          title: 'images',
          headerStyle: {
            backgroundColor: '#382464',
            height: 50,

          },
          headerTitleStyle: {
            color: '#fff',
          },
          headerTintColor: '#fff',
          // header: props => <UriBar {...props} />
        }
      } else {
        return {
          header: null
        }
      }
    }
  },

navigationName:{
屏幕：文件名，
导航选项：（{navigation}）=>{
如果（Platform.OS==“android”）{
返回{
标题：“图像”，
头型：{
背景颜色：“#382464”，
身高：50，
},
头饰样式：{
颜色：“#fff”，
},
标题颜色：“#fff”，
//标题：道具=>
}
}否则{
返回{
标题：空
}
}
}
},

---

您也可以使用android的状态栏

请显示您在

样式中使用的样式。安全区域

和

样式。容器

也可以。编辑post@mohamedadel尝试删除

translucent={true}

并告诉我是什么changes@mohamedadel这里有点奇怪，您将状态栏背景颜色设置为

rgba（0,0,0,0.3）

但它是完全透明的，请尝试将其设置为

蓝色

并查看它是否变为蓝色。或者添加更高的alpha，如

rgba（0,0,0,0.7）

@mohamedadel有什么东西在改变它，试着像平常一样，但不使用

barStyle

。也许

barStyle

正在改变所有其他样式。@mohamedadel试着用其他手机看看是否仍然如此happens@mohamedadel对不起，我帮不上更多的忙；/它在IOS上运行，但在android上仍然是一样的，有什么想法吗s？非常好，谢谢，工作很好。这些都会影响性能吗？因为我的应用程序有点慢。实际上我也不知道。如果你得到正确的答案，一定要告诉我

import { SafeAreaView } from 'react-native'

...
return (
    <SafeAreaView>
        // your components
    <SafeAreaView/>
)

     import React,{Fragment} from 'react';


            return (
              <Fragment>
               <SafeAreaView style={{ flex: 0, backgroundColor: 'red' }} />
               <SafeAreaView style={styles.safeArea}>

               <View style={styles.container}>

              { this.gradient }
              <ScrollView
                style={styles.scrollview}
                scrollEventThrottle={200}
                directionalLockEnabled={true}
              >
                  { carousel } 

                  <FlatList
                  data={ this.state.GridListItems }
                  renderItem={ ({item}) =>
                    <TouchableOpacity
                      style={styles.GridViewContainer}
                    onPress={() => this.props.navigation.push('ProfileScreen', { height: "6'2", category: item.key })}>
                    <ImageBackground
                      source={{ uri: item.img }}
                      style={{width: '108%', height: '110%', justifyContent:'center'}}
                    >
                    <Text style={styles.GridViewTextLayout}  > {item.key} </Text>
                    </ImageBackground>

                    </TouchableOpacity>
                }
                numColumns={2}
         />
              </ScrollView>

          </View>
      </SafeAreaView>
    );

navigationName: {
    screen: fileName,
    navigationOptions: ({ navigation }) => {
      if (Platform.OS === "android") {
        return {
          title: 'images',
          headerStyle: {
            backgroundColor: '#382464',
            height: 50,

          },
          headerTitleStyle: {
            color: '#fff',
          },
          headerTintColor: '#fff',
          // header: props => <UriBar {...props} />
        }
      } else {
        return {
          header: null
        }
      }
    }
  },