iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
0
Mobile Development

ReactNative 懶人開發之路,薪水小偷練成日記(X系列 第 19

[Day:18] 中秋特別篇 -2 ?、(•̀⌓•́)シ? 當 RN 遇上 3D

昨天我們使用了

Threejs 
expo-gl 
React-three-fiber 
react-spring 

製作出很酷炫的 3d 畫面,但畢竟他是 Canvas ,要與 RN 結合還需要靠 <View/> 的幫忙,

先來嘗試用 RN 控制 3D Canvas 吧~

如何更改背景顏色? https://stackoverflow.com/a/41989006

let randomHex = () => {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};
export default function App() {
  const [Color, setColor] = useState(randomHex());
  const onClick = () => {
    console.log("clicked ");
    setColor(randomHex());
  }
  return (
    <View style={styles.container}>
     .....
     .....
     ....
    </View>
  );
}

 <View style={styles.container}>
      <View style={[
        styles.container,
        { backgroundColor: Color },
      ]}>
        <Canvas shadowMap camera={{ position: [0, 0, 100], fov: 100 }}>
          <Box position={[-1.2, 0, 0]} />
          <Lights />
          <Content />
        </Canvas>
      </View>
      <View style={styles.overlay}>
        <Text style={styles.welcome}>
          Welcome to the React Native Playground!
        </Text>
       /* <TouchableHighlight
          onPress={onClick}
         ><View><Text>Tap to change the background</Text></View>
        </TouchableHighlight>*/
      </View>
    </View>

https://ithelp.ithome.com.tw/upload/images/20201002/201042201PKuLGsU0O.jpg

接者加上可愛的滑塊控制顏色 react-native-motion-slider 就完成啦~

https://ithelp.ithome.com.tw/upload/images/20201002/201042201PKuLGsU0O.jpg

https://ithelp.ithome.com.tw/upload/images/20201002/201042207NPmCo0ZML.jpg

https://ithelp.ithome.com.tw/upload/images/20201002/20104220jdlTYL8Yvg.jpg

https://ithelp.ithome.com.tw/upload/images/20201002/20104220iAa38oZb9C.jpg


上一篇
[Day:17] 中秋特別篇 ?、(•̀⌓•́)シ? three fiber spring web-gl 三D巨頭
下一篇
[Day:19] 中秋特別篇 -3 ?、(•̀⌓•́)シ? 如何建立 Expo-Three 物件
系列文
ReactNative 懶人開發之路,薪水小偷練成日記(X31

尚未有邦友留言

立即登入留言